Chip

I chip sono piccoli pezzi di metadato: i tag di un articolo, lo stato di una build, le categorie di una pagina. Sono inline per impostazione predefinita, quindi una loro fila vuole uno stack con wrap.

Chip di base

staticovitezero-runtime

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

Colori

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'),
)

Varianti

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'),
  ),
)

Dimensioni

piccolomediogrande

stack({ direction: 'row', gap: 'sm', align: 'center', wrap: true },
  chip({ size: 'sm' }, 'piccolo'),
  chip({ size: 'md' }, 'medio'),
  chip({ size: 'lg' }, 'grande'),
)

Pallino di stato

Un pallino davanti trasforma un chip in uno stato. Il solo colore non basta a portare significato, quindi tieni la parola.

Build superataIn codaFallitaSaltata

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip({ color: 'success', dot: true }, 'Build superata'),
  chip({ color: 'warning', dot: true }, 'In coda'),
  chip({ color: 'danger', dot: true }, 'Fallita'),
  chip({ color: 'neutral', dot: true }, 'Saltata'),
)

Link

Dai a un chip un href e renderizza un’ancora — la forma consueta per un elenco di tag, in cui ogni tag è una pagina.

routing data islands

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

Come pulsante

as cambia l’elemento, per un filtro che commuta invece di navigare.

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

In una tabella

Pagina	Stato
/	ok
/docs	ok
/blog/[slug]	fallita

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

Props

Prop	Tipo	Predefinito	Descrizione
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Da quale palette attingere.
`variant`	`'soft' \| 'outline' \| 'solid'`	`'soft'`	Quanto peso porta il chip.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Spazio interno e dimensione del testo.
`href`	`string`	—	Renderizza un’ancora.
`dot`	`boolean`	`false`	Aggiunge un pallino di stato prima dell’etichetta.
`as`	`string`	`'span'`	Elemento da renderizzare quando non c’è href.