#Button

#Import

import { Button } from 'bumbag';

#Usage

#Basic usage

#Colors

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

#Variants

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

#Loading

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

#Outlines

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

#Ghost

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

#Sizes

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

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

#Static

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

#Disabled

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

#Sets

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

#Group

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

#Close Buttons

#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

#Button.useProps() Hook

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

#Render props

#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[]; }

Icon that appears on the right side of the button.

iconAfterProps

{
  children?: string | number | boolean | {
     | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 47 more ... | (ReactPortal & ((props: BoxProps) => ReactNode));
    ... 776 more ...;
    label?: string
  }

iconBefore

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

Icon that appears on the left side of the button.

iconBeforeProps

{
  children?: string | number | boolean | {
     | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 47 more ... | (ReactPortal & ((props: BoxProps) => ReactNode));
    ... 776 more ...;
    label?: string
  }

isLoading boolean

Adds a loading indicator to the button.

isStatic boolean

Makes the button not interactable.

palette string

size "default" | "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"

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 "left" | "right" | "center"

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

altitude string

variant string

colorMode string

overrides

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

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

themeKey string

#Button.Close Props

iconProps

{
  children?: string | number | boolean | {
     | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 47 more ... | (ReactPortal & ((props: BoxProps) => ReactNode));
    ... 776 more ...;
    label?: string
  }

label string

Accessible label for the button. Default: "Close"

Inherits Button props

iconAfter

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

Icon that appears on the right side of the button.

iconAfterProps

{
  children?: string | number | boolean | {
     | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 47 more ... | (ReactPortal & ((props: BoxProps) => ReactNode));
    ... 776 more ...;
    label?: string
  }

iconBefore

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

Icon that appears on the left side of the button.

iconBeforeProps

{
  children?: string | number | boolean | {
     | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 47 more ... | (ReactPortal & ((props: BoxProps) => ReactNode));
    ... 776 more ...;
    label?: string
  }

isLoading boolean

Adds a loading indicator to the button.

isStatic boolean

Makes the button not interactable.

palette string

size "default" | "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"

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 "left" | "right" | "center"

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

altitude string

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 90 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 © 2020 Jake Moxey