Label

Text and icon label primitives for components and form fields.

Open Label Playground • Open Label in Figma

Preview

Search Email address (required)

Usage

<span class="label-content">
  <span class="icon" data-slot="start" style="--icon-src: url('/assets/icons/search.svg')" aria-hidden="true"></span>
  <span class="label-content__text">Search</span>
</span>

<label class="field-label" for="email">
  <span class="label-content">
    <span class="label-content__text">Email address</span>
  </span>
  <span class="field-label__required" aria-hidden="true">*</span>
  <span class="field-label__required-text"> (required)</span>
</label>

{% import "macros/ui.njk" as ui %}

{{ ui.labelContent("Search", startIcon="search") }}
{{ ui.labelContent("Add", endIcon="plus") }}
{{ ui.labelContent(startIcon="menu", iconOnly=true) }}
{{ ui.fieldLabel("Email address", htmlFor="email", required=true) }}

import { LabelContent, FieldLabel } from "ui-foundations/react/label";

<LabelContent text="Search" startIcon="search" />
<LabelContent text="Add" endIcon="plus" />
<FieldLabel htmlFor="email" text="Email address" required />

Notes

Use FieldLabel for inputs/selects/textarea so htmlFor links label and field.
For buttons, use LabelContent inside the button content path.
Icon stays decorative by default when passed as startIcon/endIcon.

Used tokens

Token
`--field-label-gap`
`--field-label-line-height`
`--field-label-required-color`
`--label-gap`

React exports

LabelContent: visual primitive for text with optional start/end icons
FieldLabel: semantic <label> wrapper that composes LabelContent