Button

The Button component is a versatile clickable element that triggers actions in your application. It extends the Row component and supports various styling options through variants and sizes.

<Button>Iceland Gull</Button>

Features

The Button component is a versatile component that can be used in a variety of ways.

Variants

Buttons come in different variants to indicate different levels of emphasis:

<Row gap={400} wrap="wrap">
  <Button variant="primary">Red-cockaded Woodpecker</Button>
  <Button variant="secondary">Black-faced Grassquit</Button>
  <Button variant="tertiary">Ruffed Grouse</Button>
</Row>

Sizes

Adjust the size of buttons with the size prop:

<Row gap={400} wrap="wrap" align="center">
  <Button size="large">Thick-billed Murre</Button>
  <Button size="medium">Indigo Bunting</Button>
  <Button size="small">Alder Flycatcher</Button>
</Row>

Leading and Trailing Elements

Buttons can include elements before or after the label:

<Row gap={400} wrap="wrap">
  <Button leading={<Icon.Save />}>Brewer's Sparrow</Button>
  <Button trailing={<Icon.ArrowRight />}>Winter Wren</Button>
</Row>

Expanded Width

Buttons will follow standard flex behavior and so they will already stretch if the parent’s flex alignment tells them to. In other cases, you can use the expanded prop to make the button stretch to fill its container width.

<Button expanded>Sage Thrasher</Button>

Alignment

Although the Button defaults to centering its content, you can control the alignment of the Button component with the usual Row props.

<Column gap={400} size="fitContent">
  <Button trailing={<Icon.ChevronRight />} justify="between">
    Hermit Thrush
  </Button>
  <Button trailing={<Icon.ChevronRight />} justify="between">
    Gloves
  </Button>
</Column>

Disabled State

You can disable a Button to prevent user interaction.

<Button disabled>Northern Parula</Button>

Anatomy

Reference

Props

The Button component inherits all of the props from the Row component and the HTMLButtonElement and adds the following props.

Events

The Button component supports the following events.

Tokens