#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.
#Links
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.
#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
orariaLabelledby
can be used to label the button.- If a description of
Button
's' function is present, theariaDescribedby
prop can be set to theid
of the component containing the description.
#Patterns
Button
has a role ofbutton
.- When a
Button
has focus, Space or Enter activates it. - When a
Button
is disabled, thedisabled
andaria-disabled
attributes are set totrue
. - If a
Button
is composed of another element (such asdiv
ora
), 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 | { | (string & { ) | (number & { ) | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 45 more ... | (ReactPortal & ((props: BoxProps) => ReactNode)); ......
iconBefore
string | IconDefinition | { viewBoxHeight: number; viewBoxWidth: number; paths: string[]; }
Icon that appears on the left side of the button.
iconBeforeProps
{ children?: string | number | boolean | { | (string & { ) | (number & { ) | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 45 more ... | (ReactPortal & ((props: BoxProps) => ReactNode)); ......
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"
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; ... 94 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
#Button.Close Props
iconProps
{ children?: string | number | boolean | { | (string & { ) | (number & { ) | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 45 more ... | (ReactPortal & ((props: BoxProps) => ReactNode)); ......
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 | { | (string & { ) | (number & { ) | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 45 more ... | (ReactPortal & ((props: BoxProps) => ReactNode)); ......
iconBefore
string | IconDefinition | { viewBoxHeight: number; viewBoxWidth: number; paths: string[]; }
Icon that appears on the left side of the button.
iconBeforeProps
{ children?: string | number | boolean | { | (string & { ) | (number & { ) | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 45 more ... | (ReactPortal & ((props: BoxProps) => ReactNode)); ......
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"
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; ... 94 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
#Theming
Button.styles.base
Button.styles.disabled
Button.styles.focus
Button.styles.hover
Button.styles.hoveractive
Button.styles.ghost
Button.styles.link
Button.styles.outlined
Button.styles.static
Button.styles.sizes.small
Button.styles.sizes.default
Button.styles.sizes.medium
Button.styles.sizes.large
Button.Icon.styles.base
Button.Icon.styles.before
Button.Icon.styles.after