Button

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

Button​

Взаимоисключающие свойства

Свойство value - это значение кнопки. Оно отображается справа от основного текста.
value и contentRight взаимоисключающие: если передано одно, второе передать нельзя.

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

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

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

Live Editor
Result
Open in CodeSandbox

Примеры​

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

Размер кнопки задается с помощью свойства size.

Live Editor
Result
Open in CodeSandbox

Ширина кнопки​

Ширина кнопки регулируется с помощью свойства stretching. Возможные значения свойства contentPlacing:

  • auto – ширина подстраивается под контент;
  • filled – кнопка растягивается на всю доступную ширину;
  • fixed – кнопка фиксированной ширины.
Live Editor
Result
Open in CodeSandbox

Позиционирование контента внутри​

Позиционирование контента внутри кнопки регулируется с помощью свойства contentPlacing. Возможные значения свойства contentPlacing:

  • default – контент центрируется;
  • relaxed – контент распологается по краям.
Live Editor
Result
Open in CodeSandbox

Вид кнопки​

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

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

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

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

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

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

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

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

Live Editor
Result
Open in CodeSandbox

Гиперссылка​

Компонент поддерживает вывод в виде тега <a>, для этого необходимо указать свойство as:

Live Editor
Result
Open in CodeSandbox