Component size, gzipped: 14kb



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.


Basic usage





Adding enhancers

As a dropdown

As an anchor

Visit the Styletron docs


Button props

Visible label.
Indicates that the button is disabled
A component rendered at the end of the button.
Show loading button style and spinner.
Indicates that the button is selected.
Defines the kind (purpose) of a button.
Function called when button is clicked.
Lets you customize all aspects of the component.
Defines the shape of the button.
Defines the size of the button.
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: