Accordion
Progressive disclosure — sections that open one at a time, or several.
Accordion props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | AccordionItem[] | — | Sections (id, title, content). |
| type | single | multiple | single | Open-panel behavior. |
| defaultOpenItems | string[] | — | Initially open section ids. |
| openItems | string[] | — | Controlled open ids. |
Avatar
Identity, by image or initials fallback.
Avatar props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | sm | md | lg | md | Avatar size. |
| src | string | — | Image source. |
| alt | string | — | Alt text. |
| fallback | string | — | Initials fallback. |
Badge
Status at a glance — the pill consumes the meaning-color pairs live.
Badge props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | BadgeTone | default | Semantic tone. |
| children | ReactNode | — | Badge content. |
Card
The raised surface — component background, hairline, one elevation.
Color slots
| Slot | Token | Description |
|---|---|---|
| Resting Background | var(--component-background) | Component background separated from the page |
| Raised Background | var(--section-background) | Card background when lifted above nearby content |
| Overlay Background | var(--nested-background) | Floating background for prominent content |
| Border | var(--border-default) | Card boundary perimeter |
Typography elements
| Element | Role | Size | Weight | Line height |
|---|---|---|---|---|
| title | var(--text-role-title-3) | 1.125rem | 600 | 1.3 |
| subhead | var(--text-role-subhead) | 0.875rem | 400 | 1.4 |
| body | var(--text-role-body) | 0.875rem | 400 | 1.5 |
Spacing rules
| Axis | What | Compact | Regular | Expanded |
|---|---|---|---|---|
| Padding | Card inner margin / padding | var(--space-3) | var(--space-5) | var(--space-7) |
| Gap | Header to body section gap | var(--space-2) | var(--space-3) | var(--space-5) |
| Corner radius | Outer container radius | var(--radius-2) | var(--radius-3) | var(--radius-4) |
States
| State | Background | Border | Text |
|---|---|---|---|
| rest | var(--component-background) | var(--border-default) | var(--text-primary) |
| hover | var(--interaction-hover) | var(--border-default) | var(--text-primary) |
| selected | var(--background-selected) | var(--info) | var(--text-primary) |
Card props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Card content. |
| variant | CardVariant | — | Adaptive density variant. |
Divider
The quiet line between regions.
Divider props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | horizontal | vertical | horizontal | Divider orientation. |
KPI
Key performance indicators for the Data display category are planned.
List
Item sets with a marker system — bullets, checks, numbers, dots or icons.
List props
| Prop | Type | Default | Description |
|---|---|---|---|
| marker | bullet | dot | check | number | icon | none | bullet | Item marker. |
| icon | IconName | — | Icon marker for all items. |
| children | ReactNode | — | ListItem elements. |
Table
Records on a raised surface — the one component that earns real elevation.
Color slots
| Slot | Token | Description |
|---|---|---|
| Header Background | var(--component-background) | Dense table header background |
| Row Background (Zebra) | var(--input-background) | Alternating row contrast step |
| Border | var(--border-subtle) | Row hairline divider |
Typography elements
| Element | Role | Size | Weight | Line height |
|---|---|---|---|---|
| header | var(--text-role-label) | 0.75rem | 600 | 1.2 |
| cell | var(--text-role-body) | 0.875rem | 400 | 1.4 |
Spacing rules
| Axis | What | Compact | Regular | Expanded |
|---|---|---|---|---|
| Cell padding | Cell inner padding | var(--space-2) | var(--space-3) | var(--space-3) var(--space-4) |
| Header padding | Column header inner padding | var(--space-2) | var(--space-2) | var(--space-3) |
| Row gap | Row vertical rhythm | var(--space-1) | var(--space-1) | var(--space-2) |
States
| State | Background | Border | Text |
|---|---|---|---|
| rest | var(--component-background) | var(--border-subtle) | var(--text-primary) |
| hover | var(--interaction-hover) | var(--border-subtle) | var(--text-primary) |
Table props
| Prop | Type | Default | Description |
|---|---|---|---|
| density | compact | regular | regular | Row density. |
| children | ReactNode | — | THead / TBody / TFoot sections. |
Tag
Labels and metadata — a softer voice than the Badge.
Tag props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | TagTone | default | Semantic tone. |
| children | ReactNode | — | Tag content. |