Button#

Import#

import { Button } from 'bumbag';

Usage#

Basic usage#

Editable example

Colors#

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

Editable example

Variants#

Editable example

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.

Editable example

Loading#

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

Editable example

Outlines#

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

Editable example

Ghost#

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

Editable example

Sizes#

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

Editable example

Links#

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

Editable example

Static#

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

Editable example

Disabled#

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

Editable example

Sets#

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

Editable example

Group#

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

Editable example

Close Buttons#

Editable example

Composition#

use#

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

Anchor
Editable example

Button.useProps() Hook#

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

Editable example

Render props#

Editable example

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#

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.

Inherits Box props

use

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

className string

children

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)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides

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

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

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"

Inherits 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.

Inherits Box props

use

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

className string

children

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)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides

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

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Theming#

Button.styles.base
Button.styles.disabled
Applies when the button is disabled. `<Button disabled>`
Button.styles.focus
Applies when the button has focus. Try it out by clicking the button.
Button.styles.hover
Applies when the button is hovered. Try it out by hovering over the button.
Button.styles.hoveractive
Applies when the button is hovered and active. Try it out by hovering over the button and clicking on it.
Button.styles.ghost
Applies for ghost buttons. `<Button variant="ghost">`
Button.styles.link
Applies for link buttons. `<Button variant="link">`
Button.styles.outlined
Applies for outlined buttons. `<Button variant="outlined">`
Button.styles.static
Applies for static buttons. `<Button isStatic>`
Button.styles.sizes.small
Applies for small buttons. `<Button size="small">`
Button.styles.sizes.default
Button.styles.sizes.medium
Applies for static buttons. `<Button size="medium">`
Button.styles.sizes.large
Applies for static buttons. `<Button size="large">`
Button.Icon.styles.base
Button.Icon.styles.before
Button.Icon.styles.after
Copyright © 2021 Jake Moxey