C-01 · Component

Buttons

Pill shape default. Primary = berry, secondary = ink outline, olive = approval, ghost = subtle. Sizes sm / md / lg. Іконка можлива зліва і справа.

Variants

<button class="btn btn--primary">Купити доступ</button>
<button class="btn btn--secondary">Деталі</button>
<button class="btn btn--olive">Підтвердити</button>
<button class="btn btn--ghost">Скасувати</button>
<button class="btn btn--link">Дізнатись більше →</button>

Sizes

З іконками

States

Block


Specs

VariantBGTextBorderUse case
primaryberry-500paperberry-500Primary CTA per screen (1)
secondarypaperinkinkSecondary action
oliveolive-500paperolive-500Approval / confirm
ghosttransparentinklineTertiary / cancel
linkberry-600Inline links

Правила

Робимо

  • Одна primary кнопка на екран — найважливіша дія
  • Імператив у тексті ("Зберегти", не "Збереження")
  • Іконка ліворуч від тексту, окрім стрілок ("→") які справа
  • Disabled — лише коли передбачуваний стан (форма невалідна)
  • btn--lg для checkout final, btn--sm у щільних UI

Не робимо

  • Дві primary поряд
  • «ОК», «Submit» — використовуй конкретний дієслово
  • Великі кнопки в inline tables
  • btn--link для destructive actions
  • Розкидати tooltip-only critical info