Button

A Button is used to trigger an action or event.

Basic

Used most in the interface. Only use another style if a button requires more or less visual weight.

Primary

Use to highlight the most important actions in any experience. Don’t use more than one primary button in a section or screen to avoid overwhelming users.

Minimal

Outline

Use against shaded or colorful backgrounds. An outline button will maintain the appropriate visual weight and won’t clash with the background color.

Plain

Use for less important or less commonly used actions since they’re less prominent. For example, plain buttons are used as actions in cards.

Button Sizes

Use when a table or list has a set of actions on each item to avoid making items taller than they need to be. Don’t use slim buttons for primary actions

Disabled State

Use for actions that aren’t currently available. The surrounding interface should make it clear why the button is disabled and what needs to be done to enable it.

Loading State

Use when a button has been pressed and the associated action is in progress.

Button with icon

Icon only button

Disclosure Button

Use to indicate that multiple options are available from this control, similar to a select HTML element.

Destructive

Use when the action will delete data or be otherwise difficult to recover from. Destructive buttons should trigger a confirmation dialog before the action is completed.

Props

  • type 'basic' | 'primary' | 'ghost' | 'outline' | 'plain'

    Description

  • destructive boolean

    Indicates a dangerous or potentially negative action

  • size 'default' | 'slim' | 'large'

    Changes the size of the button, giving it more or less padding

  • textAlign 'center' | 'left'

    Changes the inner text alignment of the button

  • fullWidth boolean

    Allows the button to grow to the width of its container

  • disclosure boolean | 'down' | 'up' | 'select'

    Displays the button with a disclosure icon. Defaults to `down` when set to true

  • icon any

    Icon to display to the left of the button content

  • url string

    A destination to link to, rendered in the href attribute of a link

  • external boolean

    Forces url to open in a new tab

  • download boolean

    Tells the browser to download the url instead of opening it

  • submit boolean

    Allows the button to submit a form

  • disabled boolean

    Disables the button, disallowing user interaction

  • loading boolean

    Replaces button text with a spinner while a background action is being performed

  • pressed boolean

    Sets the button in a pressed state

  • accessibilityLabel string

    Visually hidden text for screen readers