components / work
project chip
Chip is the reusable work metadata pill. It exposes only label, optional accent color, and className so project pages can keep tag styling consistent while still tinting individual chips.
| field | value |
| group | work |
| import | @arieare/ds-work |
| source | packages/ds-work/src/Chip.tsx
packages/ds-work/src/work-ds.css |
design-system portfolio motion
component tokens
| token | source | description |
--ds-chip-border-color / --chip-color | @arieare/ds-work/work-ds.css | Styles chip borders and the leading accent dot. |
--ds-chip-padding-* / --ds-chip-gap | @arieare/ds-work/work-ds.css | Controls the compact chip spacing contract. |
--ds-chip-font-size / --ds-chip-letter-spacing / --ds-chip-text-color | @arieare/ds-work/work-ds.css | Defines chip typography and text color. |
props
| prop | type | default | description |
label | string | — | Visible chip label. |
color | string | "#111111" | Accent dot color passed through the --chip-color custom property. |
className | string | — | Extra classes appended to the chip root. |