Button
Buttons provide cues for actions and events. These fundamental components allow users to process actions or navigate an experience.
When to use
When a person:
- submits a form,
- starts a new task / action.
The Button component has 4 different kind
variants: primary
, secondary
, tertiary
, and minimal
.
Primary buttons are intended to be used as the leading trigger or cue of action. Primary buttons are bold with a dominant color background and white text/icons. These are to be used sparingly as the sole action of a view. Primary buttons can be accompanied by secondary button to balance action hierarchy.
Secondary buttons should be used in combination with a primary button as a way to create action hierarchy. Secondary buttons are subdued in value with the primary color text to compliment the primary buttons.
Tertiary buttons can used as a substitute for a secondary buttons, but should never take the role of a primary button action. As the name implies, it’s offered to supplement to create variation within an experience.
Examples
API
Button props
Name | Type | Description |
---|---|---|
children | react node | Visible label. |
disabled | boolean | Indicates that the button is disabled |
endEnhancer | function | A component rendered at the end of the button. |
isLoading | boolean | Show loading button style and spinner. |
isSelected | boolean | Indicates that the button is selected. |
kind | enum | Defines the kind (purpose) of a button. |
onClick | function | Function called when button is clicked. |
overrides | custom | Lets you customize all aspects of the component. |
shape | enum | Defines the shape of the button. |
size | enum | Defines the size of the button. |
startEnhancer | function | A component rendered at the start of the button. |
Button exports
You can import this module like so:
import {Button} from 'baseui/button'
It exports the following components or utility functions: