Knapp-showcase
Hovra över knapparna för att verifiera den gula varumärkesringen i båda lägena.
Ljust läge
default
cta
destructive
outline
secondary
ghost
link
Mörkt läge
default
cta
destructive
outline
secondary
ghost
link
Hover-ring per variant
Varje rad visar en variant i ljust och mörkt läge sida vid sida. Hovra för att verifiera ringen.
Default
Primär åtgärd, används för huvud-CTA i formulär och kort.
variant="default"CTA
Stark uppmaning i hjälte-sektioner och slutet av sidor.
variant="cta"Destructive
Oåterkalleliga åtgärder, radera, avbryt prenumeration.
variant="destructive"Outline
Sekundär åtgärd som behöver synas men inte dominera.
variant="outline"Secondary
Stödjande åtgärd bredvid primär knapp.
variant="secondary"Ghost
Minimal knapp i toolbars och menyer (utan hover-ring).
variant="ghost"Link
Inline-länkstil för text-CTA (utan hover-ring).
variant="link"