Label

Use the label component to add contextual metadata to a design.

Page navigation navigation

React

readyNot reviewed for a11y

Storybook|Source

Rails

readyNot reviewed for a11y

Docs|Lookbook|Source

Figma

View in Figma|

A label is a piece of text that is visually stylized to differentiate it as contextual metadata. It can be used to add a status, category, or other metadata to a design.

React examples

Default

<Label>Default</Label>

<Label>Default</Label>

Style variants

The Label component ships with different visual variant options.

DefaultPrimarySecondaryAccentSuccessAttentionSevereDangerDoneSponsors

<Stack direction="horizontal" wrap="wrap">
  <Label>Default</Label>
  <Label variant="primary">Primary</Label>
  <Label variant="secondary">Secondary</Label>
  <Label variant="accent">Accent</Label>
  <Label variant="success">Success</Label>
  <Label variant="attention">Attention</Label>
  <Label variant="severe">Severe</Label>
  <Label variant="danger">Danger</Label>
  <Label variant="done">Done</Label>
  <Label variant="sponsors">Sponsors</Label>
</Stack>

<Stack direction="horizontal" wrap="wrap">
  <Label>Default</Label>
  <Label variant="primary">Primary</Label>
  <Label variant="secondary">Secondary</Label>
  <Label variant="accent">Accent</Label>
  <Label variant="success">Success</Label>
  <Label variant="attention">Attention</Label>
  <Label variant="severe">Severe</Label>
  <Label variant="danger">Danger</Label>
  <Label variant="done">Done</Label>
  <Label variant="sponsors">Sponsors</Label>
</Stack>

Size variants

The Label component can also be rendered in a large size variant.

Small (default)Large

<Stack direction="horizontal" align="center">
  <Label>Small (default)</Label>
  <Label size="large">Large</Label>
</Stack>

<Stack direction="horizontal" align="center">
  <Label>Small (default)</Label>
  <Label size="large">Large</Label>
</Stack>

Props

Label

Name	Default	Description
variant	`'default'`	`\| 'default' \| 'primary' \| 'secondary' \| 'accent' \| 'success' \| 'attention' \| 'severe' \| 'danger' \| 'done' \| 'sponsors'` The color of the label
size	`'small'`	`'small' \| 'large'` How large the label is rendered

0 ## Related links