Chip

Los chips son trocitos de metadatos: las etiquetas de una entrada de blog, el estado de una compilación, las categorías de una página. Por defecto son en línea, así que una fila de ellos pide un stack con wrap.

Chip básico

estáticovitesin-runtime

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip('estático'),
  chip('vite'),
  chip('sin-runtime'),
)

Colores

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

Variantes

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

Tamaños

pequeñomedianogrande

stack({ direction: 'row', gap: 'sm', align: 'center', wrap: true },
  chip({ size: 'sm' }, 'pequeño'),
  chip({ size: 'md' }, 'mediano'),
  chip({ size: 'lg' }, 'grande'),
)

Punto de estado

Un punto delante convierte un chip en un estado. El color por sí solo no basta para transmitir significado, así que conserva la palabra.

Compilación correctaEn colaFallidaOmitida

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip({ color: 'success', dot: true }, 'Compilación correcta'),
  chip({ color: 'warning', dot: true }, 'En cola'),
  chip({ color: 'danger', dot: true }, 'Fallida'),
  chip({ color: 'neutral', dot: true }, 'Omitida'),
)

Enlaces

Dale a un chip un href y dibujará un ancla — la forma habitual de una lista de etiquetas, donde cada etiqueta es una página.

rutas datos islas

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

Como botón

as cambia el elemento, para un filtro que alterna en vez de navegar.

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip({ as: 'button', variant: 'solid', color: 'primary', 'aria-pressed': 'true' }, 'Todo'),
  chip({ as: 'button', variant: 'outline', color: 'neutral', 'aria-pressed': 'false' }, 'Guías'),
  chip({ as: 'button', variant: 'outline', color: 'neutral', 'aria-pressed': 'false' }, 'Ejemplos'),
)

En una tabla

Página	Estado
/	ok
/docs	ok
/blog/[slug]	fallo

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

Props

Prop	Tipo	Por defecto	Descripción
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	De qué paleta bebe.
`variant`	`'soft' \| 'outline' \| 'solid'`	`'soft'`	Cuánto peso lleva el chip.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Relleno y tamaño del texto.
`href`	`string`	—	Dibuja un ancla.
`dot`	`boolean`	`false`	Añade un punto de estado antes de la etiqueta.
`as`	`string`	`'span'`	Elemento que se renderiza cuando no hay href.