Component size, gzipped: 14kb

Button

Loading
API

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

Basic usage

Kinds

States

Sizes

Shapes

Adding enhancers

As a dropdown

As an anchor

Visit the Styletron docs

API

Button props

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: