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.

Button kinds

Button states

Button sizes

Button with enhancers

Button shapes

Button dropdown

Button as an Anchor

Visit the Styletron docs

Overrides

Additionally, you can fully customize any part of the Button through the overrides prop. The Button consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

Button API

children React$Node

React$Node

disabled boolean

endEnhancer function

A helper rendered at the end of the button.

* => One of
React$Node,
React$Node

isLoading boolean

Show loading button style and spinner.

isSelected boolean

Indicates that the button is selected

kind $Keys<typeof KIND>

Defines the kind (purpose) of a button

$Keys{ primary: "primary", secondary: "secondary", tertiary: "tertiary", minimal: "minimal" }

onClick function

SyntheticEventHTMLButtonElement => mixed

overrides object

BaseButton { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
StartEnhancer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
EndEnhancer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
LoadingSpinnerContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
LoadingSpinner { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

shape $Keys<typeof SHAPE>

Defines the shape of the button

$Keys{ default: "default", round: "round", square: "square" }

size $Keys<typeof SIZE>

Defines the size of the button

$Keys{ default: "default", compact: "compact", large: "large" }

startEnhancer function

A helper rendered at the start of the button.

* => One of
React$Node,
React$Node