Button

Maintainer:
amje
GitHub
view
size
pin
selected
disabled
loading
startIcon
endIcon
onlyIcon
width
children
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-файлов.

No text:
<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.booleanfalse
hrefДелает корневой элемент ссылкойstring
loadingВключает или отключает состояние loading.booleanfalse
pinЗадает стиль краев кнопки.string"round-round"
qaHTML-атрибут 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Смещение иконки.