#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

#Colors

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

#Custom text

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

#Loading

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

#Type

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

#Custom props

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

#Addon buttons

#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;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 797 more ...;
  spinnerProps?: SpinnerProps;
}

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;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 797 more ...;
  spinnerProps?: SpinnerProps;
}

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

Inherits Set props

isFilled boolean

Indicates if the set items should span the width of the set.

orientation "horizontal" | "vertical"

Indicates the orientation of the set.

spacing string

Sets the spacing between items.

verticalBelow

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

Indicates the breakpoint at which the set should become vertical.

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

disabled boolean

overrides

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

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

themeKey string

#Theming

ActionButtons.styles.base
ActionButtons.styles.child.base
ActionButtons.styles.child.first
ActionButtons.styles.child.middle
ActionButtons.styles.child.last
Copyright © 2020 Jake Moxey