Tag

Tag обозначает статус пакета, версии или раздела гайда. Заливка и текст всегда одного оттенка из таблицы статусов - это единственный способ раскрасить тег.

Форма и шрифт

Радиус тега - pill (999px), это единственный компонент вместе с чипами-фильтрами, использующий такое скругление. Текст набран Manrope, не моно-шрифтом - даже если тег показывает номер версии, само слово статуса остаётся в интерфейсном шрифте.

Разметка

<span class="tag tag-stable">stable</span>

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-semibold);
  font-size: 0.8125rem;
}

.tag-stable {
  background: var(--color-status-stable-bg);
  color: var(--color-status-stable-text);
}

Тег - статичный элемент: <span>, без обработчиков клика и без места в порядке табуляции. Кликабельный вариант - чип-фильтр - оборачивает его в <button> отдельно.