Label
Form labels stay at 16px, Roboto / text-base / medium. Label/WithIcon lines up with buttons of the same size.
Figma: 10 / Components / LabelUsage
Source: src/components/ui/label.tsx
import { Label, LabelWithIcon } from '@/components/ui/label'<Label htmlFor='page-name'>Page name</Label>Label/WithIcon
sm, default, lg and xl match the button heights.
When to use
When to reach for it, and when to use something else.
Use it for
Complete: Every form control.
Avoid
Not complete: Labels smaller than 16px for form fields.
LabelWithIcon
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'default' | 'lg' | 'xl' | 'default' | Matches the button size it sits beside. |
| icon | ReactNode | – | Defaults to the info icon. |