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; 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
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
"right" | "left" | "center"
alignY
"top" | "bottom" | "center"
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 95 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