Используется для запуска действий.


Filled Contrast
Filled Fade Contrast
Outline Fade Theme
Outline Fade Contrast
Transparent Theme
Transparent Contrast
Filled Contrast
Filled Fade Contrast
Outline Fade Theme
Outline Fade Contrast
Transparent Theme
Transparent Contrast
Text
Icon+Text
Text+Icon
Icon+Text+Icon
Slots (order-independent)

Когда в кнопке только иконка, задайте элементу имя через aria-label или aria-labelledby. Используйте Icon Button, если нужна кнопка-иконка без фона.

В зависимости от требований контента кнопка может принимать следующие логические значения по ширине:

Hug — ширина кнопки зависит от длины текста внутри и равна ширине текста + отступы по бокам до краев кнопки.

 
 

Fixed — ширина кнопки фиксирована и не зависит от длины текста. В таком случае, если текст в кнопке не умещается, он обрезается многоточием (truncated). Следует не забывать про внутренние отступы.

 
 

Fill — кнопка подстраивается под ширину блока, в который встраивается. Если меняется ширина блока (например, модального окна), то меняется и ширина кнопки. Поведение текста внутри такой кнопки аналогично поведению у Fixed.

Если обработка действия занимает более 1-2 секунд, можно использовать индикацию хода выполнения («загрузка»). Это показывает, что система производит обработку данных.

 
Предложения по улучшению
Если вы нашли ошибку или хотите доработать статью, создайте запрос на GitHub.