Chip

Chips sind kleine Metadaten: die Tags eines Blogbeitrags, der Status eines Builds, die Kategorien einer Seite. Sie sind standardmäßig inline, eine Reihe davon will also einen stack mit wrap.

Einfacher Chip

statischviteohne-runtime

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip('statisch'),
  chip('vite'),
  chip('ohne-runtime'),
)

Farben

primaryneutralsuccesswarningdanger

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip({ color: 'primary' }, 'primary'),
  chip({ color: 'neutral' }, 'neutral'),
  chip({ color: 'success' }, 'success'),
  chip({ color: 'warning' }, 'warning'),
  chip({ color: 'danger' }, 'danger'),
)

Varianten

softsoftsoft

outlineoutlineoutline

solidsolidsolid

stack({ gap: 'sm' },
  stack({ direction: 'row', gap: 'sm', wrap: true },
    chip({ variant: 'soft', color: 'primary' }, 'soft'),
    chip({ variant: 'soft', color: 'success' }, 'soft'),
    chip({ variant: 'soft', color: 'danger' }, 'soft'),
  ),
  stack({ direction: 'row', gap: 'sm', wrap: true },
    chip({ variant: 'outline', color: 'primary' }, 'outline'),
    chip({ variant: 'outline', color: 'success' }, 'outline'),
    chip({ variant: 'outline', color: 'danger' }, 'outline'),
  ),
  stack({ direction: 'row', gap: 'sm', wrap: true },
    chip({ variant: 'solid', color: 'primary' }, 'solid'),
    chip({ variant: 'solid', color: 'success' }, 'solid'),
    chip({ variant: 'solid', color: 'danger' }, 'solid'),
  ),
)

Größen

kleinmittelgroß

stack({ direction: 'row', gap: 'sm', align: 'center', wrap: true },
  chip({ size: 'sm' }, 'klein'),
  chip({ size: 'md' }, 'mittel'),
  chip({ size: 'lg' }, 'groß'),
)

Statuspunkt

Ein Punkt davor macht aus einem Chip einen Status. Farbe allein trägt keine Bedeutung, also behalte das Wort.

Build erfolgreichIn der WarteschlangeFehlgeschlagenÜbersprungen

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip({ color: 'success', dot: true }, 'Build erfolgreich'),
  chip({ color: 'warning', dot: true }, 'In der Warteschlange'),
  chip({ color: 'danger', dot: true }, 'Fehlgeschlagen'),
  chip({ color: 'neutral', dot: true }, 'Übersprungen'),
)

Links

Gib einem Chip ein href, und er rendert einen Anker — die übliche Form für eine Tag-Liste, in der jedes Tag eine Seite ist.

routing daten islands

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip({ href: '/de/docs/routing', color: 'primary' }, 'routing'),
  chip({ href: '/de/docs/data', color: 'primary' }, 'daten'),
  chip({ href: '/de/docs/islands', color: 'primary' }, 'islands'),
)

Als Button

as wechselt das Element — für einen Filter, der umschaltet statt zu navigieren.

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip({ as: 'button', variant: 'solid', color: 'primary', 'aria-pressed': 'true' }, 'Alle'),
  chip({ as: 'button', variant: 'outline', color: 'neutral', 'aria-pressed': 'false' }, 'Anleitungen'),
  chip({ as: 'button', variant: 'outline', color: 'neutral', 'aria-pressed': 'false' }, 'Beispiele'),
)

In einer Tabelle

Seite	Status
/	ok
/docs	ok
/blog/[slug]	fehlgeschlagen

table({
  striped: true,
  columns: [
    { key: 'page', header: 'Seite' },
    { header: 'Status', align: 'end', render: (row) =>
      chip({ size: 'sm', dot: true, color: row.ok ? 'success' : 'danger' }, row.ok ? 'ok' : 'fehlgeschlagen') },
  ],
  rows: [
    { page: '/', ok: true },
    { page: '/docs', ok: true },
    { page: '/blog/[slug]', ok: false },
  ],
})

Props

Prop	Typ	Standard	Beschreibung
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Aus welcher Palette geschöpft wird.
`variant`	`'soft' \| 'outline' \| 'solid'`	`'soft'`	Wie viel Gewicht der Chip trägt.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Innenabstand und Textgröße.
`href`	`string`	—	Rendert einen Anker.
`dot`	`boolean`	`false`	Setzt einen Statuspunkt vor das Label.
`as`	`string`	`'span'`	Element, das ohne href gerendert wird.