| variant name | example size: 'default' padding: x:4 y:2 | hover | disabled opacity: 50% pointer-events: none | size=sm (small) height: 9 padding: x:3 rounded-md | size=icon width: 10 height: 10 | size=lg (large) height: 11 padding: x:8 rounded-md | size=pill padding: x:12 y:3 leading: 3 | size=wide padding: x:24 y:5 |
|---|---|---|---|---|---|---|---|---|
| default / primary | ||||||||
| background: primary 80% | ||||||||
| secondary | ||||||||
| background: secondary 80% | ||||||||
| outline | ||||||||
| background: accent text: accent-foreground | ||||||||
| ghost | ||||||||
| background: accent text: accent-foreground | ||||||||
| link | ||||||||
| text-decoration: underline | ||||||||
| destructive | ||||||||
| background: destructive 60% |