#Button

#Import

import { Button } from 'bumbag';

#Usage

#Basic usage

<Button>Default</Button>

#Colors

Colors can be added to a button with the palette prop.

<Set>
  <Button>Default</Button>
  <Button palette="gray">Gray</Button>
  <Button palette="primary">Primary</Button>
  <Button palette="secondary">Secondary</Button>
  <Button palette="success">Success</Button>
  <Button palette="danger">Danger</Button>
  <Button palette="warning">Warning</Button>
</Set>

#Variants

<Set>
  <Button palette="primary">Default</Button>
  <Button variant="outlined" palette="primary">Outlined</Button>
  <Button variant="ghost" palette="primary">Ghost</Button>
  <Button variant="link" palette="primary">Link</Button>
</Set>

#Icons

You can add icons to your buttons with the iconBefore or iconAfter prop.

Note: To use button icons, you will need to follow the instructions to set up icons with Bumbag.

<Set>
  <Button iconBefore="solid-clipboard">Copy</Button>
  <Button iconBefore="solid-pen" palette="primary">
    Edit
  </Button>
  <Button iconAfter="solid-long-arrow-alt-right">Continue</Button>
  <Button iconBefore="info-circle" iconBeforeProps={{ fontSize: '300' }}>Info</Button>
</Set>

#Loading

To indicate a button is loading, use the isLoading prop.

<Set>
  <Button isLoading>Hello world</Button>
  <Button isLoading palette="primary">Hello world</Button>
</Set>

#Outlines

An outline can be placed on a button by assigning "outlined" to the variant prop.

<Set>
  <Button palette="primary" variant="outlined">
    Primary
  </Button>
  <Button palette="secondary" variant="outlined">
    Secondary
  </Button>
  <Button palette="success" variant="outlined">
    Success
  </Button>
  <Button palette="danger" variant="outlined">
    Danger
  </Button>
</Set>

#Ghost

To have a button of minimal appearence, use the assign "ghost" to the variant prop.

<Set>
  <Button variant="ghost">Default</Button>
  <Button palette="primary" variant="ghost">
    Primary
  </Button>
  <Button palette="success" variant="ghost">
    Success
  </Button>
  <Button palette="danger" variant="ghost">
    Danger
  </Button>
  <Button palette="warning" variant="ghost">
    Warning
  </Button>
</Set>

#Sizes

Buttons are available in four different sizes and can be added with a size prop.

<Set>
  <Button size="small">Small</Button>
  <Button>Default</Button>
  <Button size="medium">Medium</Button>
  <Button size="large">Large</Button>
</Set>

#Links

A button can appear as a link with no styling by assigning "link" to the type prop.

<Button palette="primary" variant="link">
  Default
</Button>

#Static

To make a button non-interactable, add the isStatic prop.

<Button isStatic>Static</Button>

#Disabled

To indicate a button as disabled, use the disabled prop.

<Set>
  <Button disabled>Default</Button>
  <Button palette="primary" disabled>
    Primary
  </Button>
  <Button palette="success" disabled>
    Success
  </Button>
  <Button palette="danger" disabled>
    Danger
  </Button>
  <Button palette="warning" disabled>
    Warning
  </Button>
</Set>

#Sets

To display a set of buttons, use the <Set> component.

<Set>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</Set>

#Group

To group a set of buttons together, use the <Group> component.

<Group>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</Group>

#Close Buttons

<Set>
  <Button.Close size="small" />
  <Button.Close />
  <Button.Close size="large" />
</Set>

#Composition

#use

Button, by default, renders a <button> element. However, you are able to change it to a custom element using the use prop.

<Set>
  <Button>Default</Button>
  <Button use="a" href="#">
    Anchor
  </Button>
</Set>

#Button.useProps() Hook

The world is your oyster! You can use the Button.useProps() hook to spread button props wherever!

function Example() {
  const buttonProps = Button.useProps();
  return (
    <a {...buttonProps}>Hello world</a>
  )
}

#Render props

<Button>
  {buttonProps => <a {...buttonProps}>Hello world</a>}
</Button>

#Accessibility

The <Button> component follows the WAI ARIA Button Pattern.

#Rules

• Button has an accessible label denoted by it's content. If your button has no content, ariaLabel or ariaLabelledby can be used to label the button.
• If a description of Button's' function is present, the ariaDescribedby prop can be set to the id of the component containing the description.

#Patterns

• Button has a role of button.
• When a Button has focus, Space or Enter activates it.
• When a Button is disabled, the disabled and aria-disabled attributes are set to true.
• If a Button is composed of another element (such as div or a), accessible button attributes are set on the element.

#References

• WAI ARIA Button Pattern

#Props

#Button Props

iconAfter

string
  | IconDefinition
  | { viewBoxHeight: number; viewBoxWidth: number; paths?: string[]; tree?: any[]; }

Icon that appears on the right side of the button.

iconAfterProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 787 more ...;
  label?: string;
}

iconBefore

string
  | IconDefinition
  | { viewBoxHeight: number; viewBoxWidth: number; paths?: string[]; tree?: any[]; }

Icon that appears on the left side of the button.

iconBeforeProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 787 more ...;
  label?: string;
}

isLoading boolean

Adds a loading indicator to the button.

isStatic boolean

Makes the button not interactable.

palette

"default"
  | "primary"
  | "secondary"
  | "success"
  | "danger"
  | "warning"
  | (string & {})

size

"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"

spinnerProps

BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & CSSProperties & LocalBoxProps & LocalSpinnerProps

Custom props for the isLoading spinner.

type "submit" | "reset" | "button"

ignoreGrayOverride boolean

disabled boolean

Same as the HTML attribute.

focusable boolean

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

#Button.Close Props

iconProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 787 more ...;
  label?: string;
}

label string

Accessible label for the button. Default: "Close"

string
  | IconDefinition
  | { viewBoxHeight: number; viewBoxWidth: number; paths?: string[]; tree?: any[]; }

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 787 more ...;
  label?: string;
}

string
  | IconDefinition
  | { viewBoxHeight: number; viewBoxWidth: number; paths?: string[]; tree?: any[]; }

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 787 more ...;
  label?: string;
}

"default"
  | "primary"
  | "secondary"
  | "success"
  | "danger"
  | "warning"
  | (string & {})

"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"

BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & CSSProperties & LocalBoxProps & LocalSpinnerProps

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

#Theming

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      base: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      disabled: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      focus: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      hover: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      hoveractive: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      ghost: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      link: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      outlined: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      static: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      sizes: {
        small: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      sizes: {
        default: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      sizes: {
        medium: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    styles: {
      sizes: {
        large: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    Icon: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    Icon: {
      styles: {
        before: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Button: {
    Icon: {
      styles: {
        after: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>