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" – по умолчанию;
  • "accent" – акцентная;
  • "secondary" – вторичная;
  • "clear" – без цветового сопровождения;
  • "positive" – успешное завершение;
  • "warning" – предупреждение;
  • "negative" – ошибка;
  • "dark" – темная;
  • "black" – черная;
  • "white" – белая;
  • "success" – устарело, используйте "positive";
  • "critical" – устарело, используйте "negative".
caution

Значения "success" и "critical" свойства view устарели и будут удалены в будущих версиях. Используйте "positive" вместо "success" и "negative" вместо "critical".

Live Editor
Result
Open in CodeSandbox

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

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

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

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

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

Live Editor
Result
Open in CodeSandbox

Градиентный текст​

Текст кнопки можно окрасить в градиентный цвет с помощью класса sdds-core-text-node

Live Editor
Result
Open in CodeSandbox