Monospace code with a header and one-click copy
The system's one sanctioned monospace context. An optional header carries a filename and language tag; the copy button confirms with a check for two seconds. Long lines scroll horizontally inside the block.
With filename and language
/* Semantic tokens reference primitives — never skip a tier */
--color-action-primary-bg: var(--primitive-teal-07); /* #118AB2 */
--color-text-primary: var(--primitive-neutral-09); /* #050505 */
--radius-full: var(--primitive-radius-full); /* 999px */Usage snippet
The intended everyday use: component usage examples on these showcase pages.
import { Chip } from '@design-system/components/Chip/Chip';
<Chip label="Filter" icon="check" selected onClick={toggle} />Bare — no header
npm run storybook