Label

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

Page navigation navigation

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

Loading data for label...