Components / core
Tag
Metadata Chip - Tech, Topics, Years
01 Preview
02 Usage
Tiny uppercase chip for tech stacks and topic labels.
<Tag>React</Tag> <Tag tone="accent">HCI</Tag> <Tag tone="solid">2021</Tag>Tones: default (hairline) | accent (amber) | solid (filled ink). 2px radius (--radius-1), which the system uses on chips, code blocks and the radio box and nowhere else.
03 Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| tone | 'default' | 'accent' | 'solid' |
default |
— |
| children* | React.ReactNode |
— | — |
Also accepts every attribute of React.HTMLAttributes<HTMLSpanElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.
04 Import
import { Tag } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';