Inline elements
Three components live inside a sentence rather than between paragraphs: a status pill, a keyboard key, and a hover definition.
Badge
A small status label: this feature is New, that flag is Deprecated, and this one is just a neutral Label.
This feature is <Badge variant="new">New</Badge>.An icon (a name from the bundled Lucide set) renders before the label: New, Deprecated.
<Badge variant="new" icon="sparkles">New</Badge>| Variant | Reads as |
|---|---|
| unset | Neutral label |
new, tip |
Positive: fresh or recommended |
note, info |
Informational |
warning |
Caution: deprecated, experimental |
danger |
Critical: removed, breaking |
accent |
Brand-colored emphasis |
color is accepted as an alias for variant. An unknown value renders the neutral pill rather than a broken style.
Kbd
Keyboard keys render as stamped keys: press Ctrl K to open search, or Esc to close it.
Press <Kbd>Ctrl</Kbd> <Kbd>K</Kbd> to open search.Tooltip
A bundle gets its definition on hover or keyboard focus, with no JavaScript and no layout shift.
A <Tooltip tip="A precompiled artifact holding...">bundle</Tooltip> gets its definition on hover.The trigger is focusable and carries the tip as its accessible name, so the definition reaches keyboard and screen-reader users too.