Component size, gzipped: 17kb

Button

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

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