Бейджи, теги и чипы

Data Display · Selection

Бейджи, теги и чипы похожи формой, но различаются смыслом

Выбирайте компонент по задаче: бейдж сообщает текущее состояние, тег называет устойчивое свойство, а чип даёт пользователю действие над значением.

01 · СтатусBadge«Опубликовано», «Ошибка», «12» 02 · КатегорияTag«Backend», «B2B», «Документация» 03 · ДействиеChipВыбрать фильтр или удалить значение

01 · Status

Бейджи показывают состояние и количество

Текст остаётся главным носителем смысла. Цвет ускоряет сканирование, но не заменяет подпись.

ЧерновикОпубликованоТребует вниманияОшибкаНовое12

<span class="ox-badge ox-badge-success ox-badge-dot">Опубликовано</span>
<span class="ox-badge ox-badge-error ox-badge-dot">Ошибка</span>
<span class="ox-badge ox-badge-info ox-badge-count" aria-label="12 новых">12</span>

.ox-badge-dotДобавляет маркер к текстовому статусу.
.ox-badge-countФормирует компактный числовой счётчик.
success / warningСостояния с устойчивым системным смыслом.
error / infoОшибка и новое информационное состояние.

02 · Classification

Теги называют категорию или свойство

Тег статичен: он описывает объект, но сам по себе не переключает фильтр и не удаляет значение.

LaravelОсновноеПровереноЭкспериментКритичное

.ox-tag.ox-tag-accent.ox-tag-success.ox-tag-warning.ox-tag-danger

<div class="list list-row list-wrap list-gap-sm" aria-label="Технологии проекта">
  <span class="ox-tag">Laravel</span>
  <span class="ox-tag ox-tag-accent">Основное</span>
  <span class="ox-tag ox-tag-success">Проверено</span>
</div>

Когда тег становится ссылкой: если категория открывает отдельную страницу, используйте нативный <a> с оформлением тега. Для переключаемого фильтра переходите к Chip.

Tokens · Extension

Проектные варианты подключаются явно

Дополнительная цветовая группа не должна автоматически порождать классы компонентов. Добавляйте только нужные варианты через $badge-variants-extend и $tag-variants-extend.

@forward "okaux/scss/tokens/components/badge" with (
  $badge-variants-extend: (
    project-dark: (
      background: var(--ox-dark),
      color: var(--ox-alabaster),
      border-color: var(--ox-smoky),
    ),
  )
);

@forward "okaux/scss/tokens/components/tag" with (
  $tag-variants-extend: (
    project-dark: (
      background: var(--ox-alabaster),
      color: var(--ox-dark),
      border-color: var(--ox-marble),
    ),
  )
);

@use "okaux/scss/app";

<span class="ox-badge ox-badge-project-dark">На проверке</span>
<span class="ox-tag ox-tag-project-dark">Закрытый проект</span>

Контракт варианта: укажите background, color и border-color. Карты объединяются поверхностно, поэтому при замене встроенного варианта необходимо передать все три поля.

03 · Interaction

Чипы объединяют значение и действие

Чип выбирает фильтр, отражает применённое значение или позволяет его удалить. Интерактивность выражается нативной кнопкой.

.ox-chip-button.is-activearia-pressed

Анна СмирноваМихаил ОрловОльга Волкова

.ox-chip-remove

<button class="ox-chip ox-chip-button is-active" type="button" aria-pressed="true">
  Дизайн
</button>

<span class="ox-chip">
  Анна Смирнова
  <button class="ox-chip-remove" type="button" aria-label="Удалить Анну Смирнову">×</button>
</span>

Единая шкала размеров

У каждого семейства есть sm, основной md без модификатора и lg. Размер выбирается по плотности окружения, а не по смыслу элемента.

BadgeSmallMediumLarge

TagSmallMediumLarge

Chip

Смысл определяет семантику

Одинаковая капсульная форма не означает одинаковое поведение.

BadgeПонятный текст; для отдельного счётчика — доступное aria-label.
TagСтатический span или ссылка, когда категория действительно ведёт на страницу.
ChipButton, aria-pressed для выбора и отдельное имя кнопки удаления.
Не только цветСтатус и категория остаются понятны без цветового оформления.
ФокусПосле удаления приложение переводит фокус на соседний чип.
Логика приложенияЯдро задаёт стили; данные, URL и коллекции обновляет проект.

Найдите нужное в OKAUX

Где ищем

Последние запросы

Быстрый доступ