Hierarchy

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

<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.

Casing

Labels are uppercase by default (uppercase defaults to true). Set uppercase={false} for a mixed-case style with looser letter spacing and lighter weight — this is what many controls use for their labels. Keep casing consistent within a single context rather than mixing the two styles.

<Label>Uppercase label</Label>
<Label uppercase={false}>Mixed-case label</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.

<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.

<Label secondary>Secondary label</Label>

Alignment

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

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

Theme

Change the theme for a label to match its context.

<Card theme={CardTheme.Dark}>
  <Stack padding="m">
    <Label theme="dark" element="div">Dark themed label</Label>
    <Label secondary theme="dark" element="div">Secondary label</Label>
  </Stack>
</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.