Button

Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.

Button​

Storybook

ActionButton​

Использование​

Компонент Button может содержать текст, который указывается в свойстве text, или любой контент напрямую через children.

Свойство text можно использовать вместе со свойствами contentLeft и contentRight. С их помощью можно размещать иконку слева или справа от текста.

Компонент ActionButton принимает только children.

Live Editor
Result
Open in CodeSandbox

Примеры​

Размер кнопки​

Размер кнопки задается с помощью свойства size. Возможные значения свойства: "l", "m" или "s":

Live Editor
Result
Open in CodeSandbox

Вид кнопки​

Вид кнопки задается с помощью свойства view. Возможные значения свойства view:

  • "primary" – основная;
  • "secondary" – вторичная;
  • "success" – успешное завершение;
  • "warning" – предупреждение;
  • "critical" – ошибка;
  • "checked" – выбранное состояние;
  • "overlay" – для использования в мультимедия-контенте;
  • "clear" – без цветового сопровождения.
Live Editor
Result
Open in CodeSandbox

Границы кнопки​

Границы кнопки задаются с помощью свойства pin. Возможные значения свойства pin:

  • square – обычное скругление;
  • circle – сильное скругление;
  • clear – нет скругления.
Live Editor
Result
Open in CodeSandbox

Квадратные и круглые кнопки​

Для отображения иконок и/или текста в квадратных или круглых кнопках с равными сторонами, используйте компонент Button и свойство contentLeft, в которое требуется передать нужное значение.

При использовании ActionButton указывайте контент через children.

По умолчанию границы кнопки квадратные (со скругленными углами) — pin="square-square". Круглые границы кнопки можно сделать с помощью свойства pin со значением "circle-circle".

Live Editor
Result
Open in CodeSandbox