Component catalog
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Pair a leading icon with a title so the two read as one unit — the "gear + Settings" row in a sidebar, the "trash + Delete" row in a context menu, the "star + Favorites" tab.
import { Label } from "@liquidify/react/label"| Prop | Type | Default | Description |
|---|---|---|---|
| as | TextElement | undefined | span | The HTML element the title's {@link Text} renders as, so the type carries the right semantics (SwiftUI has no analogue — a web affordance). Only applies when the title is wrapped (a `string | number`). |
| className | string | undefined | — | Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean. |
| icon | ReactNode | — | The leading icon (SwiftUI `systemImage:` / `icon:`). Decorative (`aria-hidden`) — the title carries the accessible name. Omit for a title-only label; ignored when {@link LabelProps.variant} is `"titleOnly"`. |
| labelProps | SharedLabelProps | undefined | undefined | Per-instance typography override for the title `Text` (ADR-0028, charter §2 — the catalog-wide typography seam name), spread last so an explicit consumer value wins over the component default. |
| ref | Ref<HTMLSpanElement> | undefined | — | Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`. |
| title required | ReactNode | — | The title (SwiftUI `_:` / `title:`) — the accessible name, always present. A `string | number` renders through the `TextLabel` guard into an internal `Text`; any other `ReactNode` passes through unwrapped so the caller keeps ownership of its typography. |
| variant | LabelVariant | undefined | titleAndIcon | Which of the pairing to render (SwiftUI `.labelStyle(_:)`). `"iconOnly"` keeps the title in the DOM (visually hidden) so the accessible name survives. |
Label preserves the semantics of its content and should be given a clear accessible label when its visible content does not provide one.
| Name | Value |
|---|---|
| --lq-color-label- | #000000#ffffffrgba(60, 60, 67, 0.6)rgba(235, 235, 245, 0.6)rgba(60, 60, 67, 0.3)rgba(235, 235, 245, 0.3)rgba(60, 60, 67, 0.18)rgba(235, 235, 245, 0.16)rgba(60, 60, 67, 0.8)rgba(235, 235, 245, 0.8)rgba(60, 60, 67, 0.4)rgba(235, 235, 245, 0.36) |
| --lq-color-label-primary-dark | #ffffff |
| --lq-color-label-primary-light | #000000 |
| --lq-font-size-body | 0.8125rem |
| --lq-glass- | 440.71.15var(--lq-segmented-control-indicator-blur)calc(var(--lq-glass-material-blur) * 8)var(--lq-shadow-presentational) |
| --lq-icon- | Component-defined value |
| --lq-label-gap | var(--lq-space-8) |
| --lq-label-pad | Component-defined value |
| --lq-line-height-body | 1.25 |
| --lq-space-2 | 0.125rem |
| --lq-space-8 | 0.5rem |