Button

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 — подгоняет ширину кнопки под размер родительского контейнера, также скрывая переполняющее содержимое с помощью многоточия.

<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, в добавок к следующим:

§API CSS