ДокументацияРазделы, компоненты, системы и их подразделы
Кнопки
Действия, варианты и состояния
Actions
Кнопка сообщает приоритет действия
Используйте primary для главного действия, surface для вторичного, outline для альтернативы и ghost для малозаметного действия.
Основные варианты
Наведите курсор или перейдите клавишей Tab, чтобы проверить состояния.
HTMLВарианты
<button class="btn btn-primary" type="button">Продолжить</button>
<button class="btn btn-surface" type="button">Сохранить позже</button>
<button class="btn btn-outline-primary" type="button">Подробнее</button>Ссылка-кнопка сохраняет вариант во всех состояниях
Зажмите ссылку, уведите указатель за её пределы и отпустите. Цвет текста должен остаться цветом варианта, даже когда hover уже снят, а active ещё действует.
HTMLButton и ссылка
<button class="btn btn-dark" type="button">Button dark</button>
<a class="btn btn-dark" href="/details">Link dark</a>
<button class="btn btn-outline-primary" type="button">Button outline</button>
<a class="btn btn-outline-primary" href="/details">Link outline</a>Размеры
Размер отражает контекст, а не важность действия.
.btn-sm.btn.btn-lg.btn-circleСистемные состояния
Disabled нельзя использовать вместо объяснения причины недоступности.
.is-active.is-loadingdisabled