ActionButtons#

The <ActionButtons> component renders a primary action button (e.g 'Submit'), as well as a secondary action button (e.g 'Cancel'). They can be helpful for forms, dialogs and other things that require an action.

Import#

import { ActionButtons } from 'bumbag';

Usage#

<ActionButtons
  onClickSubmit={() => console.log('submitted')}
  onClickCancel={() => console.log('cancelled')}
/>

Colors#

Action buttons can also take a color from the palette using the palette prop.

<Set orientation="vertical">
  <ActionButtons
    palette="secondary"
    onClickSubmit={() => console.log('submitted')}
    onClickCancel={() => console.log('cancelled')}
  />
  <ActionButtons
    palette="danger"
    onClickSubmit={() => console.log('submitted')}
    onClickCancel={() => console.log('cancelled')}
  />
</Set>

Custom text#

To modify the text of the buttons, use the submitText and/or cancelText props.

<ActionButtons
  cancelText="Close"
  submitText="Save"
  onClickSubmit={() => console.log('submitted')}
  onClickCancel={() => console.log('cancelled')}
/>

Loading#

To indicate the primary button as loading, use the isLoading prop.

<ActionButtons
  isLoading
  onClickSubmit={() => console.log('submitted')}
  onClickCancel={() => console.log('cancelled')}
/>

Type#

To change the type of the submit button (e.g submit or reset). Use the type prop.

<ActionButtons type="submit" />

Custom props#

You can pass custom button props to action buttons using submitProps or cancelProps.

<ActionButtons
  cancelText="Reject"
  submitProps={{ disabled: true }}
  cancelProps={{ palette: 'danger' }}
/>

Addon buttons#

<ActionButtons
  addonButtons={
    <React.Fragment>
      <Button palette="danger" variant="outlined">
        Delete
      </Button>
      <Button palette="primary" variant="outlined">
        Save draft
      </Button>
    </React.Fragment>
  }
/>

ActionButtons Props#

addonButtons

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

cancelProps

{
  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
  }; ... 807 more ...;
  ignoreGrayOverride?: boolean;
}

Custom button props for the cancel button

cancelText string

Custom text for the cancel button

isLoading boolean

Makes the submit button in a loading state

onClickSubmit () => void

onClickCancel () => void

palette

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

Changes the color of the submit button

size

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

Size of the buttons

submitProps

{
  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
  }; ... 807 more ...;
  ignoreGrayOverride?: boolean;
}

Custom button props for the submit button

submitText string

Custom text for the submit button

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

Button type of the submit button

"tablet"
  | "mobile"
  | "fullHD"
  | "widescreen"
  | "desktop"
  | "min-fullHD"
  | "max-fullHD"
  | "min-widescreen"
  | "max-widescreen"
  | "min-desktop"
  | "max-desktop"
  | "min-tablet"
  | "max-tablet"
  | "min-mobile"
  | "max-mobile"

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 = {
  ActionButtons: {
    styles: {
      base: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

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

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

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

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