01
Overview
Individual tab trigger within a tab list for switching between labelled content panels.
Usage
Tab is a compose-only leaf of Tabs.
The idiomatic API is Tabs.Trigger, reached through the parent
namespace — see the tabs README for the composed
snippet. The flat @lostgradient/cinder/tab subpath remains exported for
à-la-carte builds that import the leaf directly.
02
When to use
Use when
- Declaring one tab heading inside a tabs ancestor with a stable value identifier.
- Pairing one-to-one with a tab-panel that shares the same value to wire aria-controls.
- Pointing multiple tab triggers at a caller-owned panel with the controls prop.
Avoid when
- Used outside a tabs ancestor — the component throws at construction.
- Rendering a generic action button — use button instead.
03
Props
| Name | Type | Default | Required | Bindable | Description |
|---|---|---|---|---|---|
value | text | req | Stable identifier used for tab selection; matches TabPanel in the default pattern. | ||
id | text | Optional explicit id override; auto-generated otherwise for ARIA wiring. | |||
controls | text | Optional non-empty aria-controls target for caller-owned panels. Empty or
whitespace-only strings are treated as omitted. By default, Cinder points
at the matching TabPanel id (${baseId}-panel-${value}). | |||
disabled | boolean | false | Disables this single tab and removes it from keyboard activation. | ||
children | snippet | req | Tab label content. | ||
trailing | snippet | Decorative content rendered inside an aria-hidden span (badges, kbd hints,
counters). Do NOT use for interactive controls like close buttons —
aria-hidden removes the content from the accessibility tree, making any
interactive child unreachable by keyboard and invisible to screen readers.
For a closeable tab, render a separate <button> immediately after the
<Tab> in the DOM (as a sibling within the tab strip) and associate it
with the tab via aria-label="Close [tab name]". The close button must
live outside the <Tab> element entirely. |