Обзор
Heading по умолчанию отображает h2. Используйте children для содержимого, level для структуры документа, а size для внешнего вида.
Использование
Выбирайте уровни в порядке следования в документе. Меньший визуальный размер не изменяет уровень, объявляемый вспомогательными технологиями.xs, sm, md, lg, xl и xxl используют соответствующие токены шрифта. Для больших размеров используются 1.54rem и 1.85rem соответственно. Во всех размерах сохраняются полужирное начертание и межстрочный интервал 1.1. Section.Header и Dialog.Title принимают те же значения размера. У заголовков нет внешних отступов; интервалы определяются окружающей разметкой.
Цвет и композиция
Используйтеcolor="secondary" для менее заметных заголовков. tertiary также доступен, но его контрастность зависит от размера шрифта, темы и фона. Проверяйте читаемость при его использовании.
Нативные атрибуты, стили, имена классов и refs передаются заголовку. Используйте render для композиции с пользовательским элементом или компонентом; этот элемент отвечает за сохранение семантики заголовка.
Для заголовка с поясняющим текстом или действиями используйте Section.
Свойства
"primary" | "secondary" | "tertiary"
по умолчанию:"primary"
Theme font color. Defaults to
primary.1 | 2 | 3 | 4 | 5 | 6
по умолчанию:"2"
Semantic heading level, from
h1 through h6. Does not change the visual size. Defaults to 2.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render."lg" | "md" | "sm" | "xl" | "xs" | "xxl"
по умолчанию:"md"
Visual font size from
xs through xxl, independent of the heading level. Uses the matching font token. Defaults to md.