НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Текст

Text выводит фрагмент текста в одной из типографских ролей системы. Вид (variant) и элемент (as) задаются отдельно.

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Billing history Your plan renews on 27 March 2026. Prices include VAT.
<tk-text variant="title-md" as="h3">Billing history</tk-text>
<tk-text>Your plan renews on 27 March 2026.</tk-text>
<tk-text variant="caption" color="secondary">Prices include VAT.</tk-text>

Анатомия

Часть Что это
tk-text сам элемент; выводит тег, выбранный в as
слот по умолчанию текст, обязателен; он же доступное имя
part text выведенный элемент внутри

Варианты

Display Small Title Small Heading Medium Body Medium Label Medium Code Small
<tk-text variant="display-sm">Display Small</tk-text>
<tk-text variant="title-sm">Title Small</tk-text>
<tk-text variant="heading-md">Heading Medium</tk-text>
<tk-text variant="body-md">Body Medium</tk-text>
<tk-text variant="label-md">Label Medium</tk-text>
<tk-text variant="code-sm">Code Small</tk-text>

variant — типографская роль. Размер, высота строки, начертание и семейство шрифта берутся из неё.

variant Размер / высота строки Начертание
display-lg 64 / 72 600
display-md 48 / 56 600
display-sm 40 / 48 600
title-lg 32 / 40 600
title-md 28 / 32 600
title-sm 24 / 28 600
heading-md 20 / 24 600
heading-sm 18 / 24 600
body-lg 18 / 28 400
body-md (по умолчанию) 16 / 24 400
body-sm 14 / 20 400
label-lg 16 / 24 500
label-md 14 / 20 500
label-sm 12 / 16 500
caption 12 / 16 400
code-md 16 / 24 400, моноширинный
code-sm 14 / 20 400, моноширинный
  • Display: промо-заголовки. Title: заголовки страниц и разделов. Heading: короткие заголовки внутри блока.
  • Body: основной текст. Label: текст интерфейса. Caption: тихий вспомогательный текст.
  • Code: машинный текст моноширинным шрифтом.

Элемент

Billing history Welcome back
<tk-text variant="title-md" as="h3">Billing history</tk-text>
<tk-text variant="body-lg" as="h2">Welcome back</tk-text>

as задаёт настоящий HTML-элемент: p (по умолчанию), span, div, label, code или h1–h6. Скринридеры и навигация по заголовкам видят именно его.

  • Уровень заголовка выбирайте по структуре страницы, а потом подбирайте variant по виду. Один h1 на страницу, уровни не пропускайте.
  • span и code строчные: ими оформляют фразу внутри другого текста.
  • as="code" не меняет шрифт. Добавьте code-md или code-sm.
  • as="label" не подписывает поле формы. Для этого есть Field.

Цвет

Last edited by Ada Payment received Card declined
<tk-text color="secondary">Last edited by Ada</tk-text>
<tk-text color="success">Payment received</tk-text>
<tk-text color="error">Card declined</tk-text>

color принимает роль текста, поэтому работает в любой теме.

color Для чего
default (по умолчанию) основной текст
secondary вспомогательный текст
tertiary самый неважный текст
accent акцент цветом; не кликается
success / warning / error / info текст статуса
inverse текст на инверсной (тёмной) поверхности

Цвет статуса — только для этого статуса, не для украшения. Цветов плейсхолдера, отключённого состояния и текста на заливке здесь нет: их задают компоненты, которым они нужны.

Начертание, выравнивание, обрезка, курсив

This word is important. Centered text Photo by the author
Quarterly report for the north-east region, final draft 
<tk-text>This word is <tk-text as="span" weight="bold">important</tk-text>.</tk-text>
<tk-text align="center">Centered text</tk-text>
<tk-text italic color="secondary">Photo by the author</tk-text>
<div style="max-inline-size: 16rem">
  <tk-text truncate>Quarterly report for the north-east region, final draft</tk-text>
</div>
  • weight: regular (400), medium (500), semibold (600) или bold (700). Меняется только начертание. Подходит для жирного слова в тексте, а не для имитации заголовка.
  • align: start, center или end; учитывают направление письма. Без него текст выравнивается как контейнер.
  • truncate: одна строка с многоточием. Нужна ограниченная ширина. Скринридер всё равно читает текст целиком; если полный текст нужен и зрячим, добавьте Tooltip.
  • italic: курсив для всего фрагмента, только оформление. Для логического ударения внутри предложения используйте <em>.

Внешних отступов у Text нет. Расстояние между блоками задаёт раскладка, либо возьмите Prose.