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

Пример

Документация

Дизайн

Разработка

HTML

<div class="flex flex-wrap gap-1 items-center">
<div class="sf-tag sf-tag--default sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
<div class="sf-tag sf-tag--default sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Дизайн</span></div>
<div class="sf-tag sf-tag--default sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Разработка</span></div>
</div>

Разметка

Минимальную разметку показывает пример выше: элемент с классами блока sf-tag, содержимого (sf-tag--default) и размера (sf-tag--size-1), внутри — подпись <span class="sf-tag-container">.

Раскладку задают утилиты inline-flex flex-row flex-nowrap items-center.
Статичный тег — <div> или <span> без роли и без точки Tab.
Выбираемый фильтр — нативный <button type="button"> с sf-tag--interactive и aria-pressed.
Удаляемое значение — статичный тег с sf-tag--removable и одной кнопкой удаления внутри. Выбор и удаление в одном теге не совмещайте.
Иконку, цветную метку, аватар и отметку скрывайте (aria-hidden="true"), когда подпись уже передаёт их смысл.
У компонента нет своего JavaScript: выбор и удаление обрабатывает приложение.

Варианты

Содержимое

Модификатор содержимого добавляет маркер перед подписью: sf-tag--default — только текст; sf-tag--checkbox — отметка sf-tag-check для выбираемого фильтра; sf-tag--icon — иконка sf-icon; sf-tag--color — цветная метка sf-tag-color-icon (цвет задаёт утилита фона); sf-tag--avatar — аватар размера 1/4.

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--default</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <button class="sf-tag sf-tag--checkbox sf-tag--size-1 sf-tag--interactive inline-flex flex-row flex-nowrap items-center" type="button" aria-pressed="false"><span class="sf-tag-check" aria-hidden="true"></span><span class="sf-tag-container">Дизайн</span></button>
    <code class="text-1/2 color-on-surface-variant">sf-tag--checkbox</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--icon sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><i class="sf-icon" aria-hidden="true">favorite</i><span class="sf-tag-container">Избранное</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--icon</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--color sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-color-icon bg-tertiary" aria-hidden="true"></span><span class="sf-tag-container">Фиолетовый</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--color</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--avatar sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-avatar sf-avatar--text sf-avatar--size-1/4 flex items-center justify-center" aria-hidden="true">АБ</span><span class="sf-tag-container">Анна</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--avatar</code>
  </div>
</div>

JavaScript

document.querySelectorAll('.sf-tag--interactive[aria-pressed]').forEach((tag) => {
  tag.addEventListener('click', () => {
    const active = tag.getAttribute('aria-pressed') !== 'true';
    tag.setAttribute('aria-pressed', String(active));
    tag.classList.toggle('active', active);
  });
});

Статус

sf-tag--success, sf-tag--warning и sf-tag--error окрашивают тег цветом статуса, точка sf-dot перед подписью повторяет его. Нейтральный статус — sf-tag--default. Статус не передавайте только цветом: подпись называет его словами.

Черновик

sf-tag--default

Готово

sf-tag--success

Внимание

sf-tag--warning

Ошибка

sf-tag--error

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Черновик</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--default</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--success sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-dot sf-dot--size-1/2" aria-hidden="true"><span class="sf-dot-item"></span></span><span class="sf-tag-container">Готово</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--success</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--warning sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-dot sf-dot--size-1/2" aria-hidden="true"><span class="sf-dot-item"></span></span><span class="sf-tag-container">Внимание</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--warning</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--error sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-dot sf-dot--size-1/2" aria-hidden="true"><span class="sf-dot-item"></span></span><span class="sf-tag-container">Ошибка</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--error</code>
  </div>
</div>

Вид

Вид — отдельная ось. Без класса тег стоит на нейтральной заливке. sf-tag--appearance-surface берёт слабую заливку и контур на ступень сильнее из нейтральной шкалы — для тега на цветном фоне или изображении. sf-tag--appearance-ghost прозрачен; у выбираемого тега фон появляется при наведении. Вид берут нейтральные теги (default, icon, color, avatar, checkbox); статусные теги вид не берут, чтобы не вымывать цвет статуса. Контур surface — внутренняя тень, а не рамка: тег не становится выше соседних.

Документация

без класса вида

Документация

sf-tag--appearance-surface

Документация

sf-tag--appearance-ghost

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">без класса вида</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 sf-tag--appearance-surface inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--appearance-surface</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 sf-tag--appearance-ghost inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--appearance-ghost</code>
  </div>
</div>

Размер

Размеры 1/3, 1/2, 1, 2 и 3 согласуют текст и отступы тега со ступенями текста; скругление у всех размеров одно — радиус контролов --sf-radius--ui. Тег берёт размер на ступень меньше текста или поля, рядом с которыми стоит.

Документация

sf-tag--size-1/3

Документация

sf-tag--size-1/2

Документация

sf-tag--size-1

Документация

sf-tag--size-2

Документация

sf-tag--size-3

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1/3 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--size-1/3</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1/2 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--size-1/2</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--size-1</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-2 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--size-2</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-3 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--size-3</code>
  </div>
</div>

Плотность

Плотность меняет только отступы сверху и снизу, как у кнопок: spacing-compact, без класса — обычная, spacing-comfortable и spacing-spacious.

Документация

spacing-compact

Документация

без класса

Документация

spacing-comfortable

Документация

spacing-spacious

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 spacing-compact inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">spacing-compact</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">без класса</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 spacing-comfortable inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">spacing-comfortable</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 spacing-spacious inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Документация</span></div>
    <code class="text-1/2 color-on-surface-variant">spacing-spacious</code>
  </div>
</div>

Счётчик и удаление

sf-tag-count после подписи показывает вспомогательное число, например количество задач. sf-tag--removable готовит тег к кнопке удаления: внутри стоит кнопка закрытия размера 1/3, её доступное имя называет удаляемое значение.

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Задачи</span><span class="sf-tag-count flex">12</span></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag-count</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--icon sf-tag--size-1 sf-tag--removable inline-flex flex-row flex-nowrap items-center"><i class="sf-icon" aria-hidden="true">sell</i><span class="sf-tag-container">Важное</span><button type="button" class="sf-icon-button sf-icon-button--close sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1/3" aria-label="Удалить тег Важное"><span class="sf-close sf-close--size-1/3" aria-hidden="true"><span class="sf-close-icon"></span></span></button></div>
    <code class="text-1/2 color-on-surface-variant">sf-tag--removable</code>
  </div>
</div>

JavaScript

document.querySelectorAll('.sf-tag--removable > .sf-icon-button').forEach((button) => {
  button.addEventListener('click', () => button.closest('.sf-tag--removable')?.remove());
});

В строке

sf-tag--inline ставит тег на строку другого элемента — текста, ячейки, поля выпадающего списка: убирает отступы сверху и снизу и делает кнопку удаления высотой в строку. В строке текста тег обычно на ступень меньше текста вокруг. Высоту строки задают sf-tag--line-1/2, --line-1 и --line-2 или переменная --sf-tag--line на элементе. Вместе с spacing-compact тег в строке становится компактной плашкой своего размера — так поле выпадающего списка показывает выбранные значения.

Задача назначена команде Дизайн и ждёт проверки На проверке

HTML

<p class="m-0">
  Задача назначена команде
  <span class="sf-tag sf-tag--default sf-tag--size-1/2 sf-tag--inline inline-flex items-center"><span class="sf-tag-container">Дизайн</span></span>
  и ждёт проверки
  <span class="sf-tag sf-tag--warning sf-tag--size-1/2 sf-tag--inline inline-flex items-center"><span class="sf-tag-container">На проверке</span></span>
</p>

Длинный текст

Тег не шире доступной области и переносит длинную подпись, не создавая горизонтальной прокрутки. Переносы и промежутки между тегами группы задают утилиты контейнера.

Интерфейс

Очень длинное выбранное значение, которое переносится в пределах доступной ширины

Готово

HTML

<div class="flex flex-wrap gap-2 items-center">
  <div class="sf-tag sf-tag--default sf-tag--size-1 inline-flex items-center"><span class="sf-tag-container">Интерфейс</span></div>
  <div class="sf-tag sf-tag--color sf-tag--size-1 inline-flex items-center"><span class="sf-tag-color-icon bg-tertiary" aria-hidden="true"></span><span class="sf-tag-container">Очень длинное выбранное значение, которое переносится в пределах доступной ширины</span></div>
  <div class="sf-tag sf-tag--success sf-tag--size-1 inline-flex items-center"><span class="sf-dot sf-dot--size-1/2" aria-hidden="true"><span class="sf-dot-item"></span></span><span class="sf-tag-container">Готово</span></div>
</div>

Состояния

Наведение и нажатие выбираемый тег показывает сам.

Выбран

Класс active вместе с aria-pressed="true" отмечает выбранный фильтр: отметка sf-tag-check заполняется. Состояние сообщает aria-pressed, а не класс.

aria-pressed="false"

active, aria-pressed="true"

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-start">
    <button class="sf-tag sf-tag--checkbox sf-tag--size-1 sf-tag--interactive inline-flex flex-row flex-nowrap items-center" type="button" aria-pressed="false"><span class="sf-tag-check" aria-hidden="true"></span><span class="sf-tag-container">Дизайн</span></button>
    <code class="text-1/2 color-on-surface-variant">aria-pressed="false"</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <button class="sf-tag sf-tag--checkbox sf-tag--size-1 sf-tag--interactive active inline-flex flex-row flex-nowrap items-center" type="button" aria-pressed="true"><span class="sf-tag-check" aria-hidden="true"></span><span class="sf-tag-container">Дизайн</span></button>
    <code class="text-1/2 color-on-surface-variant">active, aria-pressed="true"</code>
  </div>
</div>

Недоступен

Класс disabled даёт тегу серую заливку и приглушает подпись. Кнопке-фильтру добавьте и нативный disabled: только он снимает фокус и нажатие.

button disabled

Архив

disabled

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-start">
    <button class="sf-tag sf-tag--checkbox sf-tag--size-1 sf-tag--interactive disabled inline-flex flex-row flex-nowrap items-center" type="button" aria-pressed="false" disabled><span class="sf-tag-check" aria-hidden="true"></span><span class="sf-tag-container">Дизайн</span></button>
    <code class="text-1/2 color-on-surface-variant">button disabled</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--default sf-tag--size-1 disabled inline-flex flex-row flex-nowrap items-center"><span class="sf-tag-container">Архив</span></div>
    <code class="text-1/2 color-on-surface-variant">disabled</code>
  </div>
</div>

Фокус

Выбираемый тег и кнопка удаления при переходе клавишей Tab получают кольцо фокуса по :focus-visible; оно остаётся видимым и в режиме высокой контрастности. В примере фокус показан классом focus-visible, который CSS читает наравне с :focus-visible.

sf-tag--interactive

Важное

кнопка удаления

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-start">
    <button class="sf-tag sf-tag--checkbox sf-tag--size-1 sf-tag--interactive focus-visible inline-flex flex-row flex-nowrap items-center" type="button" aria-pressed="false"><span class="sf-tag-check" aria-hidden="true"></span><span class="sf-tag-container">Дизайн</span></button>
    <code class="text-1/2 color-on-surface-variant">sf-tag--interactive</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="sf-tag sf-tag--icon sf-tag--size-1 sf-tag--removable inline-flex flex-row flex-nowrap items-center"><i class="sf-icon" aria-hidden="true">sell</i><span class="sf-tag-container">Важное</span><button type="button" class="sf-icon-button sf-icon-button--close sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1/3 focus-visible" aria-label="Удалить тег Важное"><span class="sf-close sf-close--size-1/3" aria-hidden="true"><span class="sf-close-icon"></span></span></button></div>
    <code class="text-1/2 color-on-surface-variant">кнопка удаления</code>
  </div>
</div>

Доступность

Статичный тег не получает роль и точку Tab.
Выбираемый фильтр — <button> с aria-pressed; группу фильтров оборачивайте в элемент с role="group" и общим доступным именем.
Кнопка удаления называет значение: «Удалить тег Важное». После удаления переведите фокус на соседний тег или на поле ввода.
Статус передавайте словами в подписи, а не только цветом.
Маркеры перед подписью и кнопка удаления стоят на логических сторонах и зеркалятся при письме справа налево.

Классы

Что	Классы
Блок	`sf-tag`
Части	`sf-tag-check`, `sf-tag-color-icon`, `sf-tag-container`, `sf-tag-count`
Модификаторы	`sf-tag--appearance-ghost`, `sf-tag--appearance-surface`, `sf-tag--avatar`, `sf-tag--checkbox`, `sf-tag--color`, `sf-tag--default`, `sf-tag--error`, `sf-tag--icon`, `sf-tag--inline`, `sf-tag--interactive`, `sf-tag--line-1`, `sf-tag--line-1/2`, `sf-tag--line-2`, `sf-tag--removable`, `sf-tag--success`, `sf-tag--warning`
Размеры	`sf-tag--size-1`, `sf-tag--size-1/2`, `sf-tag--size-1/3`, `sf-tag--size-2`, `sf-tag--size-3`

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Настройка

Эти переменные — поверхность настройки компонента. Их имена стабильны: переименовать или убрать такую переменную можно только через журнал изменений, с предупреждением, как атрибут. Framework их не задаёт, поэтому значение можно поставить на сам компонент (.sf-tag) или на любого предка. Переменные действуют на спокойный вид; наведение, фокус, нажатие, недоступность и ошибка рисуются поверх, поэтому состояния остаются видны.

Переменная	Что задаёт	По умолчанию
`--sf-tag-background-color`	Заливка метки в покое; у наведения, нажатия, выбора и недоступности — своя.	`var(--sf-surface-container)`; зависит от вида, статуса
`--sf-tag-color`	Цвет подписи и счётчика в покое; у недоступной — свой.	`var(--sf-on-surface)`; зависит от статуса
`--sf-tag-radius`	Скругление углов.	`var(--sf-radius--ui)`
`--sf-tag-padding-inline`	Отступ до и после содержимого; метка в строке сохраняет отступы своего хозяина.	`var(--sf-ui-1--space-x)`; зависит от размера
`--sf-tag-padding-block`	Отступ сверху и снизу от содержимого; метка в строке сохраняет отступы своего хозяина.	`var(--sf-ui-1--space-y-tightness-default)`; зависит от размера, spacing
`--sf-tag-gap`	Промежуток между частями метки (каждый размер ставит 0: подпись отделяет её собственная ступень).	`var(--sf-a1)`; зависит от размера

CSS

.sf-tag {
  --sf-tag-radius: 0;
}

Устройство

Остальные переменные — внутренняя проводка компонента: модификаторы задают им значения, а части их читают. Их имена и устройство могут меняться в любом выпуске, поэтому проект их не задаёт. Значение по умолчанию — из базового правила блока (.sf-tag); переменную без него задают только модификаторы.

Переменная	По умолчанию	Задаёт
`--sf-tag--background-color`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--color`: `var(--sf-tag-background-color, var(--sf-surface-container))`	`background-color`
`--sf-tag--block`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-tag-padding-block, var(--sf-ui-1/3--space-y-tightness-default))`	`padding-top`, `padding-bottom`
`--sf-tag--box-shadow`	не задана; задают модификаторы, например `.sf-tag.sf-tag--appearance-surface.sf-tag--color`: `inset 0 0 0 var(--sf-px) var(--sf-alpha-8)`	`box-shadow`
`--sf-tag--font-size`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-text-size-1/3)`	`font-size`, `--sf-close-icon--height`, `--sf-close-icon--width`
`--sf-tag--gap`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-tag-gap, 0)`	`gap`
`--sf-tag--inline-end`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-tag-padding-inline, var(--sf-ui-1/3--space-x))`	`padding-inline-end`
`--sf-tag--inline-line`	не задана; задают модификаторы, например `.sf-tag.sf-tag--inline.sf-tag--inline`: `var(--sf-tag--line)`	`line-height`
`--sf-tag--inline-start`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-tag-padding-inline, var(--sf-ui-1/3--space-x))`	`padding-inline-start`
`--sf-tag--label-end`	не задана; задают модификаторы, например `.sf-tag.sf-tag--inline.sf-tag--inline`: `0`	`padding-inline-end`
`--sf-tag--label-start`	не задана; задают модификаторы, например `.sf-tag.sf-tag--inline.sf-tag--inline`: `0`	`padding-inline-start`
`--sf-tag--line`	не задана; задают модификаторы, например `.sf-tag.sf-tag--line-1/2`: `var(--sf-text-height-1/2)`	`line-height`, `--sf-tag--inline-line`, `min-height`, `min-block-size`, `height`, `block-size`, `width`, `inline-size`
`--sf-tag--line-height`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-text-height-1/3)`	`line-height`, `min-height`, `min-block-size`, `height`, `block-size`, `width`, `inline-size`
`--sf-tag--padding-bottom`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--color`: `var(--sf-ui-1--space-y-tightness-default)`	`padding-bottom`
`--sf-tag--padding-inline-end`	не задана; задают модификаторы, например `.sf-tag--size-1`: `var(--sf-ui-1--space-x)`	`padding-inline-end`
`--sf-tag--padding-inline-start`	не задана; задают модификаторы, например `.sf-tag--size-1`: `var(--sf-ui-1--space-x)`	`padding-inline-start`, `--sf-tag-container--padding-inline-start`
`--sf-tag--padding-top`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--color`: `var(--sf-ui-1--space-y-tightness-default)`	`padding-top`
`--sf-tag-color-icon--border-radius`	не задана; задают модификаторы, например `.sf-tag.sf-tag--color .sf-tag-color-icon`: `var(--sf-radius-circle)`	`border-radius`
`--sf-tag-color-icon--height`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1 .sf-tag-color-icon`: `var(--sf-text-height-1)`	`height`
`--sf-tag-color-icon--opacity`	не задана; задают модификаторы, например `.sf-tag.sf-tag--color.disabled .sf-tag-color-icon`: `var(--sf-opacity-30)`	`opacity`
`--sf-tag-color-icon--width`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1 .sf-tag-color-icon`: `var(--sf-text-height-1)`	`width`
`--sf-tag-container--background-color`	не задана; задают модификаторы, например `.sf-tag .sf-tag-container`: `transparent`	`background-color`
`--sf-tag-container--color`	не задана; задают модификаторы, например `.sf-tag.sf-tag--color .sf-tag-container`: `var(--sf-tag-color, var(--sf-on-surface))`	`color`
`--sf-tag-container--font-family`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--color .sf-tag-container`: `var(--sf-text--family)`	`font-family`
`--sf-tag-container--font-size`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--color .sf-tag-container`: `var(--sf-text-size-1)`	`font-size`
`--sf-tag-container--font-weight`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--color .sf-tag-container`: `var(--sf-font-weight-regular)`	`font-weight`
`--sf-tag-container--line-height`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--color .sf-tag-container`: `var(--sf-text-height-1)`	`line-height`
`--sf-tag-container--padding-inline-end`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--color .sf-tag-container`: `var(--sf-ui-1--space-x)`	`padding-inline-end`
`--sf-tag-container--padding-inline-start`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--color .sf-tag-container`: `var(--sf-ui-1--space-x)`	`padding-inline-start`
`--sf-tag-count--background-color`	не задана; задают модификаторы, например `.sf-tag.sf-tag--default .sf-tag-count`: `transparent`	`background-color`
`--sf-tag-count--color`	не задана; задают модификаторы, например `.sf-tag.sf-tag--default .sf-tag-count`: `var(--sf-tag-color, var(--sf-on-surface))`	`color`
`--sf-tag-count--font-family`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--default .sf-tag-count`: `var(--sf-text--family)`	`font-family`
`--sf-tag-count--font-size`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--default .sf-tag-count`: `var(--sf-text-size-1)`	`font-size`
`--sf-tag-count--font-weight`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--default .sf-tag-count`: `var(--sf-font-weight-regular)`	`font-weight`
`--sf-tag-count--line-height`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--default .sf-tag-count`: `var(--sf-text-height-1)`	`line-height`
`--sf-tag-count--padding-inline-end`	не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1 .sf-tag-count`: `var(--sf-space-1/3)`	`padding-inline-end`

Навигация

Главное

Документация

Содержание

Теги

Пример

Разметка

Варианты

Содержимое

Статус

Вид

Размер

Плотность

Счётчик и удаление

В строке

Длинный текст

Состояния

Выбран

Недоступен

Фокус

Доступность

Классы

Переменные

Настройка

Устройство

См. также

Настройки

Теги

Пример

Разметка

Варианты

Содержимое

Статус

Вид

Размер

Плотность

Счётчик и удаление

В строке

Длинный текст

Состояния

Выбран

Недоступен

Фокус

Доступность

Классы

Переменные

Настройка

Устройство

См. также

Поиск по документации