Label

Лейбл содержит текстовую информацию об объекте и описывает его свойство — например, статус или тип. Лейблы используются для категоризации, маркировки или классификации, а также для разметки сущностей в формате «ключ–значение».

§Применение

Лейблы используются повсеместно (например, в карточках, в таблицах, на страницах сущностей) для обозначения свойств объекта и помогают пользователям быстро идентифицировать и классифицировать контент. Обычно лейблы отображаются рядом с объектами, к которым они относятся.

Отдельный вариант применения — отображение количества объектов, которые не помещаются при перечислении. В этом случае при наведении курсора на лейбл появляется всплывающая подсказка (popover) со списком остальных сущностей.

Также лейблы могут использоваться в роли меток — для упорядочивания сущностей и более удобной работы с ними.

При отображении лейблов в таблице стоит ограничить количество лейблов в ячейке (максимум 2–3 лейбла подряд и максимум 2 колонки с лейблами в одной таблице), а также максимальное количество символов (максимум 20 символов в одном лейбле, далее многоточие).

§Структура

1 — левая иконка, опциональна, не интерактивна. Используется для более быстрого считывания информации.

2 — текст, рекомендуется использовать не более 20 символов в одном лейбле. Можно использовать прилагательные (например, «новый», «активен», «бесплатный»), причастия («остановлен»), существительные («скидка»), а также наречия. Текст лейбла не должен содержать глаголов (например, «включить»). Если требуется глагол, лучше использовать кнопку.

3 — альтернативный вариант текста в формате «ключ–значение», используется для ручной разметки объектов пользователем. Например, можно назначить на объект такие метки: service: delivery, release: 23.

4 — правая иконка, интерактивная. Может быть, например, иконкой закрытия или копирования.

§Размеры

Существует 3 размера лейбла:

XS — используются в большинстве мест: таблицы, списки, заголовки, попапы, страница сущности.

S — используется на формах для предпросмотра добавленных меток и там, где позволяет пространство.

M — подобный размер используется реже из-за того, что напоминает кнопку.

§Темы

Без семантического окраса:

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

Clear — не имеет фона, только контур. Используется для минимального акцента.

С семантическим окрасом:

Unknown — нейтральный вариант, используется, когда не требуется акцентировать внимание на информации, обернутой в лейбл.

Accent — для выделения важной информации и для операций «в процессе».

Success — для отображения успешно завершенного процесса или «здоровья» сущности.

Warning — для внештатных ситуаций, чтобы предупредить пользователя о чем-либо.

Danger — для привлечения максимального внимания, когда появилась какая-либо ошибка и нужно предпринять действия для устранения проблемы.

§Семантические лейблы vs кнопки

Лейблы, в том числе с семантическим окрасом, используются для индикации состояния. Единственное доступное взаимодействие с ними — hover на лейбл или клик по иконке. Лейбл не может быть в состоянии Selected. Если необходимо создать интерактивный элемент на основе семантических лейблов (например, для фильтров по статусу), лучше использовать кнопки: у них предусмотрено нажатое (примененное) состояние Selected и поддержка семантических цветов.

§Модификации и состояния

У всех лейблов предусмотрено 5 состояний: только текст, иконка перед текстом, после текста, иконки до и после и только одна иконка.

Взаимодействовать можно:

1. Со всем лейблом — например, при наведении на лейбл появляется всплывающая подсказка с детальной информацией.

2. Отдельно с правой иконкой — в зависимости от иконки нажатие на нее может удалить лейбл или скопировать его значение.

Главное правило при добавлении взаимодействия с лейблом – убедиться, что возможность взаимодействия с лейблом понятна пользователю.

§Дополнительные возможности

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

Если ваш интерфейс позволяет пользователям создавать собственные метки и маркировать объекты, пользователи должны иметь возможность добавлять и удалять лейблы.

§Кастомизация

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

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