import {Button} from '@gravity-ui/uikit';
Компонент Button
используется как триггер для выполнения определенного действия. Основное назначение кнопки – запуск действия. В редких случаях кнопка используется вместо ссылок для перехода на другую страницу.
§Внешний вид
По внешнему виду компонент Button
делится на 4 типа: базовая кнопка, контурная кнопка, плоская кнопка и контрастная кнопка.
Внешний вид кнопки определяется свойством view
.
§Базовая кнопка
action
— наиболее заметный тип кнопки. Используется для выполнения основного действия на экране, требующего максимального внимания.
Рекомендуется использовать не более одной такой кнопки на странице.
normal
— тип кнопки по умолчанию. Используется для вторичных действий или когда нужно сохранить важность действия, но не слишком привлекать к нему внимание.
raised
— кнопка, располагающаяся поверх контента в виде плавающего элемента; обычно имеет фиксированное положение.
<Button view="action" size="l">Action</Button>
<Button view="normal" size="l">Normal</Button>
<Button view="raised" size="l">Raised</Button>
§Контурная кнопка (outlined
)
outlined
— используется для вторичных действий, требующих меньшего внимания. Может использоваться как с основной кнопкой, так и без нее; при этом, если есть основная кнопка, она должна быть акцентирована.
outlined-action
: Обычно используется как ссылка на другую страницу или внешний ресурс.
Этот тип кнопки также имеет дополнительные семантические варианты: outlined-info
, outlined-success
, outlined-warning
и outlined-danger
.
<Button view="outlined" size="l">Outlined</Button>
<Button view="outlined-action" size="l">Outlined Action</Button>
<Button view="outlined-info" size="l">Outlined Info</Button>
<Button view="outlined-success" size="l">Outlined Success</Button>
<Button view="outlined-warning" size="l">Outlined Warning</Button>
<Button view="outlined-danger" size="l">Outlined Danger</Button>
<Button view="outlined-utility" size="l">Outlined Utility</Button>
§Плоская кнопка (flat
)
flat
— используется для вспомогательных действий, требующих наименьшего внимания. Такие элементы часто встречаются в списках кнопок или иконок действий (без текста) в редакторах.
flat-secondary
— менее акцентированная версия кнопки flat
. Часто используется в качестве вспомогательной кнопки в диалогах и модальных окнах.
flat-action
— обычно используется как ссылка на другую страницу или внешний ресурс.
Также имеет дополнительные семантические варианты: outlined-info
, outlined-success
, outlined-warning
и outlined-danger
.
<Button view="flat" size="l">Flat</Button>
<Button view="flat-secondary" size="l">Flat Secondary</Button>
<Button view="flat-action" size="l">Flat Action</Button>
<Button view="flat-info" size="l">Flat Info</Button>
<Button view="flat-success" size="l">Flat Success</Button>
<Button view="flat-warning" size="l">Flat Warning</Button>
<Button view="flat-danger" size="l">Flat Danger</Button>
<Button view="flat-utility" size="l">Flat Utility</Button>
§Контрастная кнопка (contrast
)
Кнопки normal-contrast
, outline-contrast
и flat-contrast
выделяют действия на фоне сложного фона, например, на баннере или фоне с инверсией.
<Button view="normal-contrast" size="l">Normal Contrast</Button>
<Button view="outlined-contrast" size="l">Outlined Contrast</Button>
<Button view="flat-contrast" size="l">Flat Contrast</Button>
§Иконки
Чтобы добавить иконку в Button
, используйте компонент Icon
, который представляет собой обертку для SVG-файлов.
<Button view="outlined" size="l">
<Icon data={Gear} size={18} />
Start
</Button>
<Button view="outlined" size="l">
End
<Icon data={Gear} size={18} />
</Button>
<Button view="outlined" size="l">
<Icon data={Gear} size={18} />
Both
<Icon data={Gear} size={18} />
</Button>
<Button view="outlined" size="l">
<Icon data={Gear} size={18} />
</Button>
§Состояния
Button
может иметь разные состояния:
disabled
— когда взаимодействие с кнопкой по каким-либо причинам недоступно.
loading
— когда в фоновом режиме выполняются асинхронные процессы.
selected
— когда пользователь может включить (Enable) или отключить (Disable) кнопку.
<Button size="l" disabled>Disabled</Button>
<Button size="l" loading>Loading</Button>
<Button size="l" selected>Selected</Button>
§Переключатель меню
Button
автоматически меняет свой внешний вид при передаче специальных aria-атрибутов (aria-haspopup
, aria-expanded
):
<Button aria-haspopup="menu" aria-expanded="true">Menu</Button>
§Размер
Размер Button
можно настроить с помощью свойства size
. Размер по умолчанию — m
.
<Button size="xs">XS Size</Button>
<Button size="s">S Size</Button>
<Button size="m">M Size</Button>
<Button size="l">L Size</Button>
<Button size="xl">XL Size</Button>
§Ширина
Для управления поведением компонента Button
внутри контейнера используйте свойство width
:
auto
— ограничивает максимальную ширину кнопки, скрывая переполняющее содержимое с помощью многоточия.
max
— подгоняет ширину кнопки под размер родительского контейнера, также скрывая переполняющее содержимое с помощью многоточия.
Default
Auto
Max
<Button>Default</Button>
<Button width="auto">Auto</Button>
<Button width="max">Max</Button>
§Форматирование краев
Свойство pin
позволяет настраивать форму начальных и конечных краев элемента и обычно используется для объединения нескольких кнопок в единый блок.
Значение свойства pin
включает названия стилей начального и конечного краев, разделенных дефисом, например, round-brick
.
Доступные стили краев: round
(по умолчанию), circle
, brick
и clear
.
<div>
<Button view="action" size="l" pin="round-clear">Create</Button>
<Button view="action" size="l" pin="brick-round">...</Button>
</div>
<div>
<Button view="normal" size="l" pin="circle-clear">Start</Button>
<Button view="normal" size="l" pin="brick-brick" selected>Center</Button>
<Button view="normal" size="l" pin="clear-circle">End</Button>
</div>
<div>
<Button view="outlined" pin="brick-clear">1</Button>
<Button view="outlined" pin="clear-clear">2</Button>
<Button view="outlined" pin="clear-clear">3</Button>
<Button view="outlined" pin="clear-brick">4</Button>
</div>
§Свойства
Компонент Button
принимает все допустимые свойства элемента button
или a
, в добавок к следующим:
Имя | Описание | Тип | Значение по умолчанию |
---|---|---|---|
children | Содержимое кнопки. Можно использовать как текст, так и компонент <Icon/> . | React.ReactNode | |
component | Переопределяет корневой компонент. | React.ElementType | |
disabled | Включает или отключает состояние disabled . | boolean | false |
href | Делает корневой элемент ссылкой | string | |
loading | Включает или отключает состояние loading . | boolean | false |
pin | Задает стиль краев кнопки. | string | "round-round" |
qa | HTML-атрибут data-qa , используется для тестирования. | string | |
selected | Включает или отключает состояние selected . | boolean | |
size | Задает размер кнопки. | "xs" "s" "m" "l" "xl" | "m" |
view | Задает внешний вид кнопки. | ButtonView | "normal" |
width | Задает ширину кнопки. | "auto" "max" |
§API CSS
Имя | Описание |
---|---|
--g-button-text-color | Цвет текста. |
--g-button-text-color-hover | Цвет текста при ховере. |
--g-button-background-color | Цвет фона. |
--g-button-background-color-hover | Цвет фона при ховере. |
--g-button-border-width | Ширина границы. |
--g-button-border-color | Цвет границы. |
--g-button-border-style | Стиль границы. |
--g-button-focus-outline-width | Толщина контура при получении фокуса. |
--g-button-focus-outline-color | Цвет контура при получении фокуса. |
--g-button-focus-outline-style | Стиль контура при получении фокуса. |
--g-button-focus-outline-offset | Смещение контура при получении фокуса. |
--g-button-height | Высота (высота строки). |
--g-button-padding | Боковые отступы. |
--g-button-border-radius | Радиус скругления углов. |
--g-button-font-size | Размер шрифта текста. |
--g-button-icon-space | Размер пространства под иконку. |
--g-button-icon-offset | Смещение иконки. |