// .btn--success / .btn--success-inverse

Primární akce

Hlavní (zelené) tlačítko a jeho outline varianta. Používej jen jedno per sekce.

Solid + outline
// .btn--accent

Akcentní akce

Důležitá akce mezi primary a secondary – vizuálně silná, ale není to hlavní zelené CTA. Base barva je role accent (paleta slate, navy). Používá se např. na tlačítko „Hledat".

Solid accent
// .btn--danger / .btn--danger-inverse

Destruktivní akce

Pro mazání, rušení a nevratné operace. Outline verze jako default v tabulkách.

Solid + outline
// .btn--warning

Upozornění

Sekundární vážnost – publikace, archivace, akce vyžadující potvrzení.

Solid
// .btn--secondary / .btn--secondary.dark

Neutrální akce

Default outline pro vedlejší akce – „Zrušit", „Zpět", filtry. Modifier .dark zvýrazní border pro lepší čitelnost na bílém pozadí.

Outline + outline-dark
// .btn-sm / default / .btn-lg

Velikosti

Tři velikosti – .btn-sm pro tabulky a inline akce, default pro většinu UI a .btn-lg pro hero CTA.

Solid success
S ikonou
// .btn--rounded

Zaoblené (pill)

Pro tagy, chip-style filtry a CTA na landing pages.

Pill varianty
// .btn-link

Linkové tlačítko

Tertiary akce – v breadcrumbs, ve formulářích jako „Zapomenuté heslo".

Inline link
Zapomenuté heslo Pokračovat Více informací →
// .btn-normal / .btn-bold / .btn-bolder / .btn-lighter

Tučnost písma

Pro jemné rozlišení v sériích – např. primární „Bold" vs. sekundární „Normal".

Modifikátory
// .btn--icon-right / .btn--icon-top / .btn--icon-bottom

Pozice ikony

Výchozí pozice je vlevo (ikona jako první child – řešeno automaticky CSS). Modifikátory .btn--icon-right, .btn--icon-top a .btn--icon-bottom mění pořadí bez změny HTML struktury.

Přehled čtyř pozic
Vlevo (výchozí)
.btn--icon-right
.btn--icon-top
.btn--icon-bottom
Více variant tlačítek
Vlevo
Vpravo
Nahoře
Dole
// kombinace v UI

Toolbar & CTA páry

Typické použití v reálném UI – primární vpravo, zrušit vlevo.

Form footer
Toolbar (table actions)