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>