Бейджи
Бейдж показывает короткий статус, категорию или счётчик рядом с объектом. Он
дополняет основное содержимое и не заменяет кнопку, фильтр или
уведомление ; для статуса без текста
подходит точка состояния .
Пример
Отчёт за квартал
Черновик
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex items-center gap-2" >
<span >Отчёт за квартал</span >
<span class ="sf-badge sf-badge--tonal sf-badge--neutral sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Черновик</span ></span ></span >
</div >
Разметка
Минимальную разметку показывает пример выше. Части вложены так:
sf-badge → sf-badge-text-container → sf-badge-text; иконка — sf-icon
в sf-badge-icon-container.
На блоке sf-badge — один класс вида, один класс цвета и размер. Без
классов вида и цвета бейдж залит вспомогательным цветом текста, без размера
берёт ступень 1/3.
Текст — в sf-badge-text: он не переносится и обрезается многоточием, если
бейджу не хватает места.
Иконка необязательна и ставится до или после текста.
Варианты
Вид
Вид задаёт выраженность: sf-badge--main — сплошная заливка, самый заметный
акцент; sf-badge--tonal — спокойная тональная заливка; sf-badge--outline —
только граница. Вид меняет вес бейджа, а не смысл.
Основной sf-badge--main
Тональный sf-badge--tonal
Контурный sf-badge--outline
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-4" >
<div class ="flex flex-col items-start gap-1" >
<span class ="sf-badge sf-badge--main sf-badge--primary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Основной</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--main</code >
</div >
<div class ="flex flex-col items-start gap-1" >
<span class ="sf-badge sf-badge--tonal sf-badge--primary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Тональный</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--tonal</code >
</div >
<div class ="flex flex-col items-start gap-1" >
<span class ="sf-badge sf-badge--outline sf-badge--primary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Контурный</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--outline</code >
</div >
</div >
Цвет
Цвет берётся из ролей темы: sf-badge--neutral, sf-badge--primary,
sf-badge--secondary, sf-badge--tertiary, sf-badge--on-surface и статусы
sf-badge--info, sf-badge--success, sf-badge--warning, sf-badge--error.
Статус выбирайте по смыслу, а не по желаемому цвету. У on-surface нет
тонального вида. sf-badge--danger — другое имя error.
Черновик Черновик Черновик sf-badge--neutral
Новое Новое Новое sf-badge--primary
Бета Бета Бета sf-badge--secondary
Акция Акция Акция sf-badge--tertiary
PHP 8.2 PHP 8.2 sf-badge--on-surface
Справка Справка Справка sf-badge--info
Готово Готово Готово sf-badge--success
Проверка Проверка Проверка sf-badge--warning
Ошибка Ошибка Ошибка sf-badge--error
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 gap-2" >
<div class ="flex flex-wrap items-center gap-2" >
<span class ="sf-badge sf-badge--main sf-badge--neutral sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Черновик</span ></span ></span >
<span class ="sf-badge sf-badge--tonal sf-badge--neutral sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Черновик</span ></span ></span >
<span class ="sf-badge sf-badge--outline sf-badge--neutral sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Черновик</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--neutral</code >
</div >
<div class ="flex flex-wrap items-center gap-2" >
<span class ="sf-badge sf-badge--main sf-badge--primary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Новое</span ></span ></span >
<span class ="sf-badge sf-badge--tonal sf-badge--primary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Новое</span ></span ></span >
<span class ="sf-badge sf-badge--outline sf-badge--primary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Новое</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--primary</code >
</div >
<div class ="flex flex-wrap items-center gap-2" >
<span class ="sf-badge sf-badge--main sf-badge--secondary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Бета</span ></span ></span >
<span class ="sf-badge sf-badge--tonal sf-badge--secondary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Бета</span ></span ></span >
<span class ="sf-badge sf-badge--outline sf-badge--secondary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Бета</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--secondary</code >
</div >
<div class ="flex flex-wrap items-center gap-2" >
<span class ="sf-badge sf-badge--main sf-badge--tertiary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Акция</span ></span ></span >
<span class ="sf-badge sf-badge--tonal sf-badge--tertiary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Акция</span ></span ></span >
<span class ="sf-badge sf-badge--outline sf-badge--tertiary sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Акция</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--tertiary</code >
</div >
<div class ="flex flex-wrap items-center gap-2" >
<span class ="sf-badge sf-badge--main sf-badge--on-surface sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >PHP 8.2</span ></span ></span >
<span class ="sf-badge sf-badge--outline sf-badge--on-surface sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >PHP 8.2</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--on-surface</code >
</div >
<div class ="flex flex-wrap items-center gap-2" >
<span class ="sf-badge sf-badge--main sf-badge--info sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Справка</span ></span ></span >
<span class ="sf-badge sf-badge--tonal sf-badge--info sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Справка</span ></span ></span >
<span class ="sf-badge sf-badge--outline sf-badge--info sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Справка</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--info</code >
</div >
<div class ="flex flex-wrap items-center gap-2" >
<span class ="sf-badge sf-badge--main sf-badge--success sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Готово</span ></span ></span >
<span class ="sf-badge sf-badge--tonal sf-badge--success sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Готово</span ></span ></span >
<span class ="sf-badge sf-badge--outline sf-badge--success sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Готово</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--success</code >
</div >
<div class ="flex flex-wrap items-center gap-2" >
<span class ="sf-badge sf-badge--main sf-badge--warning sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Проверка</span ></span ></span >
<span class ="sf-badge sf-badge--tonal sf-badge--warning sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Проверка</span ></span ></span >
<span class ="sf-badge sf-badge--outline sf-badge--warning sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Проверка</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--warning</code >
</div >
<div class ="flex flex-wrap items-center gap-2" >
<span class ="sf-badge sf-badge--main sf-badge--error sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Ошибка</span ></span ></span >
<span class ="sf-badge sf-badge--tonal sf-badge--error sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Ошибка</span ></span ></span >
<span class ="sf-badge sf-badge--outline sf-badge--error sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Ошибка</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--error</code >
</div >
</div >
Размер
Три ступени — sf-badge--size-1/3, sf-badge--size-1/2 и sf-badge--size-1
— меняют кегль, отступы и иконку вместе. Берите ступень окружающих элементов
управления.
Черновик sf-badge--size-1/3
Черновик sf-badge--size-1/2
Черновик sf-badge--size-1
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap items-end gap-4" >
<div class ="flex flex-col items-start gap-1" >
<span class ="sf-badge sf-badge--tonal sf-badge--neutral sf-badge--size-1/3 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Черновик</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--size-1/3</code >
</div >
<div class ="flex flex-col items-start gap-1" >
<span class ="sf-badge sf-badge--tonal sf-badge--neutral sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Черновик</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--size-1/2</code >
</div >
<div class ="flex flex-col items-start gap-1" >
<span class ="sf-badge sf-badge--tonal sf-badge--neutral sf-badge--size-1 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Черновик</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--size-1</code >
</div >
</div >
В строке текста
Классы sf-badge--line-1/2, sf-badge--line-1 и sf-badge--line-2 ставят
бейдж в строку текста той же ступени: бейдж получает высоту строки, а надпись —
кегль на ступень меньше и не добавляет вертикальных отступов. Так строка
таблицы или ряд полей сохраняет свою высоту.
Заказ № 1042
Оплачен sf-badge--line-1/2 рядом с text-1/2
Заказ № 1042
Оплачен sf-badge--line-1 рядом с text-1
Заказ № 1042
Оплачен sf-badge--line-2 рядом с text-2
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 gap-2" >
<div class ="flex flex-wrap items-center gap-2" >
<p class ="text-1/2 m-0" >Заказ № 1042</p >
<span class ="sf-badge sf-badge--tonal sf-badge--success sf-badge--line-1/2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Оплачен</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--line-1/2 рядом с text-1/2</code >
</div >
<div class ="flex flex-wrap items-center gap-2" >
<p class ="text-1 m-0" >Заказ № 1042</p >
<span class ="sf-badge sf-badge--tonal sf-badge--success sf-badge--line-1 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Оплачен</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--line-1 рядом с text-1</code >
</div >
<div class ="flex flex-wrap items-center gap-2" >
<p class ="text-2 m-0" >Заказ № 1042</p >
<span class ="sf-badge sf-badge--tonal sf-badge--success sf-badge--line-2 flex flex-row flex-nowrap justify-center items-center" ><span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Оплачен</span ></span ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-badge--line-2 рядом с text-2</code >
</div >
</div >
Иконки
Иконка в sf-badge-icon-container стоит в логическом начале или конце бейджа
и берёт цвет и размер бейджа. Бейдж из одной иконки и сокращённый счётчик
получают полный текст в sr-only.
check Проверено
иконка в начале
Справка info
иконка в конце
Подтверждено
verified
только иконка и sr-only
Больше девяноста девяти непрочитанных сообщений
99+
счётчик и sr-only
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap items-end gap-4" >
<div class ="flex flex-col items-start gap-1" >
<span class ="sf-badge sf-badge--tonal sf-badge--success sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" >
<span class ="sf-badge-icon-container flex justify-center items-center" ><i class ="sf-icon" aria-hidden ="true" >check</i ></span >
<span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Проверено</span ></span >
</span >
<code class ="text-1/2 color-on-surface-variant" >иконка в начале</code >
</div >
<div class ="flex flex-col items-start gap-1" >
<span class ="sf-badge sf-badge--outline sf-badge--info sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" >
<span class ="sf-badge-text-container flex items-center" ><span class ="sf-badge-text" >Справка</span ></span >
<span class ="sf-badge-icon-container flex justify-center items-center" ><i class ="sf-icon" aria-hidden ="true" >info</i ></span >
</span >
<code class ="text-1/2 color-on-surface-variant" >иконка в конце</code >
</div >
<div class ="flex flex-col items-start gap-1" >
<span class ="sf-badge sf-badge--main sf-badge--success sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" >
<span class ="sr-only" >Подтверждено</span >
<span class ="sf-badge-icon-container flex justify-center items-center" ><i class ="sf-icon" aria-hidden ="true" >verified</i ></span >
</span >
<code class ="text-1/2 color-on-surface-variant" >только иконка и sr-only</code >
</div >
<div class ="flex flex-col items-start gap-1" >
<span class ="sf-badge sf-badge--main sf-badge--error sf-badge--size-1/2 flex flex-row flex-nowrap justify-center items-center" >
<span class ="sr-only" >Больше девяноста девяти непрочитанных сообщений</span >
<span class ="sf-badge-text-container flex items-center" aria-hidden ="true" ><span class ="sf-badge-text" >99+</span ></span >
</span >
<code class ="text-1/2 color-on-surface-variant" >счётчик и sr-only</code >
</div >
</div >
Доступность
Бейдж — неинтерактивный текст: он не получает фокус и не имеет роли.
Смысл передаёт текст; цвет его только поддерживает.
Декоративную иконку скрывайте через aria-hidden="true". У бейджа из одной
иконки или сокращения вроде «99+» полный текст лежит в sr-only, а видимая
часть скрыта от экранного диктора.
Счётчику нужен контекст: «3 новых сообщения», а не «3». Задайте его соседним
текстом или через sr-only.
Если значение меняется на глазах у пользователя, объявление задаёт
окружающая область с aria-live или role="status".
Классы
Что
Классы
Блок
sf-badge
Части
sf-badge-icon-container, sf-badge-text, sf-badge-text-container
Модификаторы
sf-badge--error, sf-badge--info, sf-badge--line-1, sf-badge--line-1/2, sf-badge--line-2, sf-badge--main, sf-badge--neutral, sf-badge--on-surface, sf-badge--outline, sf-badge--primary, sf-badge--secondary, sf-badge--success, sf-badge--tertiary, sf-badge--tonal, sf-badge--warning
Размеры
sf-badge--size-1, sf-badge--size-1/2, sf-badge--size-1/3
Устаревшие
sf-badge--danger → sf-badge--error
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Настройка
Эти переменные — поверхность настройки компонента. Их имена стабильны: переименовать или убрать такую переменную можно только через журнал изменений, с предупреждением, как атрибут. Framework их не задаёт, поэтому значение можно поставить на сам компонент (.sf-badge) или на любого предка. Переменные действуют на спокойный вид; наведение, фокус, нажатие, недоступность и ошибка рисуются поверх, поэтому состояния остаются видны.
Переменная
Что задаёт
По умолчанию
--sf-badge-background-colorЗаливка бейджа.
var(--sf-on-surface-variant); зависит от вида, схемы, статуса
--sf-badge-colorЦвет текста и иконки.
var(--sf-on-surface-inverse); зависит от вида, схемы, статуса
--sf-badge-border-colorЦвет рамки; виден при ненулевой ширине рамки.
transparent; зависит от вида, схемы, статуса
--sf-badge-border-widthШирина рамки со всех сторон.
0; зависит от вида
--sf-badge-radiusСкругление углов.
var(--sf-radius-circle)
--sf-badge-padding-inlineОтступ до и после текста по строчной оси.
var(--sf-ui-1/3--text-space-x); зависит от размера
--sf-badge-padding-blockОтступ над и под текстом.
var(--sf-ui-1/3--space-y-tightness-low); зависит от размера
--sf-badge-gapПромежуток между иконкой и текстом.
var(--sf-space-1/4)
CSS wrap_text Wrap source lines content_copy Copy
.sf-badge {
--sf-badge-radius : 0 ;
}
Устройство
Остальные переменные — внутренняя проводка компонента: модификаторы задают им значения, а части их читают. Их имена и устройство могут меняться в любом выпуске, поэтому проект их не задаёт. Значение по умолчанию — из базового правила блока (.sf-badge); переменную без него задают только модификаторы.
Переменная
По умолчанию
Задаёт
--sf-badge--background-colorvar(--sf-badge-background-color, var(--sf-on-surface-variant))background-color
--sf-badge--border-bottom-widthvar(--sf-badge-border-width, 0)border-bottom-width
--sf-badge--border-colorvar(--sf-badge-border-color, transparent)border-color
--sf-badge--border-inline-end-widthvar(--sf-badge-border-width, 0)border-inline-end-width
--sf-badge--border-inline-start-widthvar(--sf-badge-border-width, 0)border-inline-start-width
--sf-badge--border-styleне задана; задают модификаторы, например .sf-badge--outline: solid
border-style
--sf-badge--border-top-widthvar(--sf-badge-border-width, 0)border-top-width
--sf-badge--colorvar(--sf-badge-color, var(--sf-on-surface-inverse))color, --sf-icon--color, --sf-badge-text--color
--sf-badge--font-sizevar(--sf-text-size-1/3)font-size, --sf-icon--font-size, --sf-badge-text--font-size
--sf-badge--gapvar(--sf-badge-gap, var(--sf-space-1/4))gap
--sf-badge--line-heightvar(--sf-text-height-1/3)line-height, --sf-badge--min-size, --sf-badge-text--line-height
--sf-badge--min-sizecalc(var(--sf-badge--line-height) + 2 * var(--sf-badge--padding-block))min-height, min-block-size, min-width, min-inline-size
--sf-badge--padding-blockvar(--sf-badge-padding-block, var(--sf-ui-1/3--space-y-tightness-low))padding-top, padding-bottom, padding-block, --sf-badge--min-size
--sf-badge--padding-inline-endvar(--sf-badge-padding-inline, var(--sf-ui-1/3--text-space-x))padding-inline-end
--sf-badge--padding-inline-startvar(--sf-badge-padding-inline, var(--sf-ui-1/3--text-space-x))padding-inline-start
--sf-badge-text--colorне задана; задают модификаторы, например .sf-badge.sf-badge--tonal .sf-badge-text: var(--sf-badge-color, var(--sf-badge--color))
color
--sf-badge-text--font-sizeне задана; задают модификаторы, например .sf-badge--size-1 .sf-badge-text: var(--sf-badge--font-size)
font-size
--sf-badge-text--line-heightне задана; задают модификаторы, например .sf-badge--size-1 .sf-badge-text: var(--sf-badge--line-height)
line-height
См. также
Предыдущая Всплывающие сообщения Следующая Точка состояния
