Button

@coinbase/cds-web@8.13.6

A pressable button element.

Import

import { Button } from '@coinbase/cds-web/buttons/Button'

SourceView source codeStorybookView StorybookFigmaView Figma

---

Related components

• Pressable,
• ButtonGroup,
• IconButton

Primary Button

Use primary buttons for high emphasis actions. These buttons have the most visual impact and should be reserved for the most important, final actions that complete a flow, like Save, Join now, or Confirm. Try to use one per screen. Multiple primary buttons make it confusing for the user to understand what action they should take.

Loading...

󰙡

Live Code

<Button onClick={console.log} variant="primary">
  Primary
</Button>

Secondary Button

These buttons have a medium level of emphasis that should be used for non-critical actions. Secondary buttons can be used on pages without restrictions and works well for multiple actions of equal weight. They can be used in conjunction with a Primary Button or independently.

Loading...

󰙡

Live Code

<Button onClick={console.log} variant="secondary">
  Secondary
</Button>

Tertiary Button

These buttons provide high contrast with the background through the use of the themable inverted background color.

Loading...

󰙡

Live Code

<Button onClick={console.log} variant="tertiary">
  Tertiary
</Button>

Negative Button

Negative buttons should be used sparingly for destructive actions that will result in data loss, can’t be undone, or will have significant consequences. They commonly appear in confirmation dialogs as the final confirmation before deleting.

Loading...

󰙡

Live Code

<Button onClick={console.log} variant="negative">
  Negative
</Button>

Transparent Button

Transparent buttons are used for less important actions that are supplementary. These buttons have lower prominence since its container is not visible until the button is interacted with. Transparent buttons are frequently used on Cards and can be placed on a variety of backgrounds.

Loading...

󰙡

Live Code

<HStack gap={2}>
  <Button onClick={console.log} transparent>
    Primary
  </Button>
  <Button onClick={console.log} variant="secondary" transparent>
    Secondary
  </Button>
  <Button onClick={console.log} variant="tertiary" transparent>
    Secondary
  </Button>
  <Button onClick={console.log} variant="negative" transparent>
    Negative
  </Button>
</HStack>

Buttons with end icon

You can add an icon after the label of a button.

Loading...

󰙡

Live Code

<HStack gap={2}>
  <Button onClick={console.log} endIcon="add" endIconActive variant="secondary" compact>
    Select file
  </Button>
  <Button onClick={console.log} endIcon="forwardArrow" variant="secondary" compact>
    See more
  </Button>
</HStack>