Hierarchy

The basic hierarchy of label sizes available. If no size is provided, it defaults to "m".

Editable example
<Label size="l">Label L</Label>
<Label size="m">Label M</Label>
<Label size="s">Label S</Label>
<Label size="l">Label L</Label>
<Label size="m">Label M</Label>
<Label size="s">Label S</Label>

Best practices

1. Avoid manually applying a className to override the color, text-align, font-weight, or font-size. All of these parameters are handled by the component's props.
2. Label components do not contain any inherent spacing. It's recommended to use the layout to determine spacing. Rather than applying a className and applying a margin or padding to the text, use the containing element with display: flex; or display: grid; and gap to determine spacing.

Long labels

Labels use all caps by default. This is fine for short 1—4 word labels, but can be difficult to read for anything longer. For this case, use the long prop to change to a more readable style that is not forced to uppercase. This is also context dependent — avoid jumping between long styled labels and regular labels within a single context.

Editable example
<Label long>This label would be harder to read in all caps</Label>
<Label long>This label would be harder to read in all caps</Label>

Element

Determines the underlying HTML element rendered by the component. Note that by default it's a <span>, and not a <label>. This is because we more commonly use "labels" as a more general typographic element, and the <label> element should be used exclusively for inputs and controls. The default element can be changed to any other element such as a <label> for labelling a control.

Note in this case the htmlFor prop is also provided. Check out the accessibility section for more info.

Editable example
<Label element="label" htmlFor="control-id">Label for a control</Label>
<input id="control-id" className="text-input__input text-input__input--bordered" />
<Label element="label" htmlFor="control-id">Label for a control</Label>
<input id="control-id" className="text-input__input text-input__input--bordered" />

Secondary

Secondary labels should be used to reduce emphasis on the label with a fainter text color.

Editable example
<Label secondary>Secondary label</Label>
<Label secondary>Secondary label</Label>

Alignment

Alignment can be set using the align prop. Defaults to left aligned.

Editable example
<Label align="center">Center aligned label</Label>
<Label align="center">Center aligned label</Label>

Theme

Change the theme for a label to match its context.

Editable example
<Card theme={CardTheme.Dark}>
  <div className="space-inset-m">
    <Label theme="dark" element="div">Dark themed label</Label>
    <Label secondary theme="dark" element="div">Secondary label</Label>
  </div>
</Card>
<Card theme={CardTheme.Dark}>
  <div className="space-inset-m">
    <Label theme="dark" element="div">Dark themed label</Label>
    <Label secondary theme="dark" element="div">Secondary label</Label>
  </div>
</Card>

Accessibility

• When using the label for a control and providing the correct element="label" prop, the htmlFor="control-id prop (switching "control-id" for a unique id referencing the control's id) must also be included.
• Avoid manually overriding the text color and instead use the secondary prop to dim less important text and the theme prop to use appropriate colors for a light or dark theme. The default colors assigned for each of these props have been chosen to meet the WCAG AA minimum contrast ratio.

Figma text styles

There's an explicit mapping of text styles to React components for the standard and strong variants. Figma doesn't store text color or alignment in text styles though, so those variants need to be inferred. Rule of thumb is if the text color is Slate-80 in Figma, it should be the secondary variant.