Merge pull request #510 from buildo/button-icon-position

Author: gabro

packages/bento-design-system/src/Button/Button.tsx

@@ -18,13 +18,15 @@ type Props = {
   isDisabled?: boolean;
   size?: ButtonSize;
   icon?: (props: IconProps) => JSX.Element;
+  iconPosition?: "leading" | "trailing";
 } & Omit<AriaButtonProps<"button">, "onPress">;
 
 /**
  * A button
  */
 export function Button(props: Props) {
   const config = useBentoConfig().button;
+  const iconPosition = props.iconPosition ?? config.defaultIconPosition;
   const ref = useRef<HTMLButtonElement>(null);
   const { buttonProps } = useButton(props, ref);
   const {
@@ -61,7 +63,7 @@ export function Button(props: Props) {
       onPointerDown={internal_unsafe__bypassUsePress ? undefined : buttonProps.onPointerDown}
       onClick={internal_unsafe__bypassUsePress ? props.onPress : buttonProps.onClick}
     >
-      <Columns space={config.internalSpacing} alignY="center">
+      <Columns space={config.internalSpacing} alignY="center" reverse={iconPosition === "trailing"}>
         {props.icon && (
           <Column width="content">
             {props.icon({

packages/bento-design-system/src/Button/Config.ts

@@ -1,7 +1,7 @@
 import { IconProps } from "../Icons";
 import { BentoSprinkles } from "../internal";
 import { LabelProps } from "../Typography/Label/Label";
-import { ButtonSize } from "./Button";
+import { ButtonProps, ButtonSize } from "./Button";
 
 type SizeConfig<T> = {
   [k in ButtonSize]: T;
@@ -22,4 +22,5 @@ export type ButtonConfig = {
    * @default "medium"
    */
   defaultSize: ButtonSize;
+  defaultIconPosition: ButtonProps["iconPosition"];
 };

packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -138,6 +138,7 @@ export const button: ButtonConfig = {
   },
   uppercaseLabel: true,
   defaultSize: "medium",
+  defaultIconPosition: "leading",
 };
 
 export const card: CardConfig = {

packages/storybook/stories/Components/Button.stories.tsx

@@ -93,3 +93,10 @@ export const WithIcon = createStory({
   hierarchy: "primary",
   icon: IconCheck,
 });
+
+export const WithIconTrailing = createStory({
+  kind: "solid",
+  hierarchy: "primary",
+  icon: IconCheck,
+  iconPosition: "trailing",
+});