Buttons

Buttons are calls to action used throughout the product experience. Buttons Design Guidelines.

Edit the code below to see your changes live!

API

Button

Prop Name
Type
Default
Description
actionTypenormal | destructivenormal

Indicates whether your button's action is of normal or destructive nature.

iconLeftIcon

Pass in an Icon component to display to the left of the text.

iconOnlyIcon

Pass in an Icon component to replace content with an icon.

iconRightIcon

Pass in an Icon component to display to the right of the text.

isLoadingbooleanfalse

Used to determine if component is in a loading state.

variantprimary | secondary | subtleprimary

Determines which style of button to display.

Props ending with * are required

Inherited Props

Expand

Margin Props

Variants

There are three types of variants to choose from: primary, secondary, and subtle. You can determine what type of variant by using the variant prop.

Edit the code below to see your changes live!

Action Types

There are two action types: normal & destructive. They are used to indicate the nature of the action when clicking on the button.

Edit the code below to see your changes live!

States

Loading

The loading state is used when clicking a button will perform a asyncronous action.

Edit the code below to see your changes live!

Disabled

A disabled state is used to indicate no action can be done using the button by passing a disabled prop.

Edit the code below to see your changes live!

Icons

A button can also include icons on either side of the text (or both). When using iconOnly, the iconLeft & iconRight components will be removed.

Edit the code below to see your changes live!

Beta