Dev Tools
TokenTable
Displays a list of design tokens with name, value, and visual preview. Supports color, spacing, radius, and shadow token types.
Import
import TokenTable from '../../components/utility/TokenTable.astro';Props
| Prop | Type | Required | Description |
|---|---|---|---|
tokens | { token: string; value: string; preview?: string }[] | Yes | Array of token objects to display |
type | 'color' | 'spacing' | 'radius' | 'shadow' | 'default' | No | Preview type — determines how the preview column renders (default: "default") |
Preview
Preview Semantic name Primitive reference --color-content-primary L cool-grey-900 --color-content-secondary L cool-grey-alpha-600 --color-content-tertiary L cool-grey-alpha-500