Edit this page
[?] Component size, gzipped: 25kb

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

Basic usage

Kinds

States

Sizes

Shapes

Adding enhancers

As a dropdown

As an anchor

Visit the Styletron docs

API

Button exports

You can import this module like so:

import {Button} from 'baseui/button'

It exports the following components or utility functions:

  • Button
  • KIND
  • SIZE
  • SHAPE
  • StyledBaseButton
  • StyledStartEnhancer
  • StyledEndEnhancer
  • StyledLoadingSpinner
  • StyledLoadingSpinnerContainer