Code block

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, a maxHeight caps tall snippets with an inner vertical scroll, and collapsible folds the whole code area behind a chevron.

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 '@robr0/design-system/components/Chip/Chip';

<Chip label="Filter" icon="check" selected onClick={toggle} />

Collapsible

With collapsible, a chevron beside the filename opens and closes the code area, the same animation as Accordion. Add defaultCollapsed to start closed.

import { Chip } from '@robr0/design-system/components/Chip/Chip';

<Chip label="Filter" icon="check" selected onClick={toggle} />

/* 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 */

Constrained height

With maxHeight, tall snippets scroll vertically inside the block while the header stays pinned. Numbers are pixels; strings pass through as-is.

:root {
  --color-action-primary-bg: var(--primitive-teal-07);
  --color-action-primary-bg-hover: var(--primitive-teal-08);
  --color-action-passive-bg: var(--primitive-neutral-02);
  --color-action-passive-bg-hover: var(--primitive-neutral-03);
  --color-bg-page: var(--primitive-white);
  --color-bg-container-primary: var(--primitive-neutral-01);
  --color-bg-container-secondary: var(--primitive-neutral-02);
  --color-bg-container-tertiary: var(--primitive-neutral-03);
  --color-bg-container-border: var(--primitive-neutral-03);
  --color-text-primary: var(--primitive-neutral-09);
  --color-text-secondary: var(--primitive-neutral-07);
  --color-text-tertiary: var(--primitive-neutral-05);
  --color-status-info: var(--primitive-blue-07);
  --color-status-positive: var(--primitive-green-07);
  --color-status-warning: var(--primitive-orange-07);
  --color-status-error: var(--primitive-red-07);
  --color-status-neutral: var(--primitive-neutral-06);
}

Bare (no header)

npm run storybook