Чип

Чипы — это маленькие кусочки метаданных: теги поста, статус сборки, категории страницы. По умолчанию они строчные, поэтому ряд из них просит stack с wrap.

Простой чип

статикаviteбез-рантайма

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip('статика'),
  chip('vite'),
  chip('без-рантайма'),
)

Цвета

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

Варианты

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

Размеры

маленькийсреднийбольшой

stack({ direction: 'row', gap: 'sm', align: 'center', wrap: true },
  chip({ size: 'sm' }, 'маленький'),
  chip({ size: 'md' }, 'средний'),
  chip({ size: 'lg' }, 'большой'),
)

Точка состояния

Точка спереди превращает чип в статус. Один только цвет смысла не несёт, поэтому слово оставьте.

Сборка прошлаВ очередиПровалиласьПропущена

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip({ color: 'success', dot: true }, 'Сборка прошла'),
  chip({ color: 'warning', dot: true }, 'В очереди'),
  chip({ color: 'danger', dot: true }, 'Провалилась'),
  chip({ color: 'neutral', dot: true }, 'Пропущена'),
)

Ссылки

Дайте чипу href — и он нарисует ссылку: обычная форма для списка тегов, где каждый тег это страница.

маршруты данные острова

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip({ href: '/ru/docs/routing', color: 'primary' }, 'маршруты'),
  chip({ href: '/ru/docs/data', color: 'primary' }, 'данные'),
  chip({ href: '/ru/docs/islands', color: 'primary' }, 'острова'),
)

Как кнопка

as меняет элемент — для фильтра, который переключается, а не ведёт на другую страницу.

stack({ direction: 'row', gap: 'sm', wrap: true },
  chip({ as: 'button', variant: 'solid', color: 'primary', 'aria-pressed': 'true' }, 'Все'),
  chip({ as: 'button', variant: 'outline', color: 'neutral', 'aria-pressed': 'false' }, 'Руководства'),
  chip({ as: 'button', variant: 'outline', color: 'neutral', 'aria-pressed': 'false' }, 'Примеры'),
)

В таблице

Страница	Статус
/	ок
/docs	ок
/blog/[slug]	ошибка

table({
  striped: true,
  columns: [
    { key: 'page', header: 'Страница' },
    { header: 'Статус', align: 'end', render: (row) =>
      chip({ size: 'sm', dot: true, color: row.ok ? 'success' : 'danger' }, row.ok ? 'ок' : 'ошибка') },
  ],
  rows: [
    { page: '/', ok: true },
    { page: '/docs', ok: true },
    { page: '/blog/[slug]', ok: false },
  ],
})

Пропсы

Проп	Тип	По умолчанию	Описание
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Из какой палитры брать цвета.
`variant`	`'soft' \| 'outline' \| 'solid'`	`'soft'`	Насколько весомо выглядит чип.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Отступы и размер текста.
`href`	`string`	—	Рендерит ссылку.
`dot`	`boolean`	`false`	Добавляет точку состояния перед подписью.
`as`	`string`	`'span'`	Какой элемент рендерить, когда href нет.