WAPER / UI
Buttons
Eleven variants. Text buttons are pills at 24 / 30 / 32 / 36; icon buttons 20–44, square (radius 6) or circle. Pressed adds a 12% tint, no scaling; loading keeps the width.
Light
Loading preview…
Dark
Loading preview…
WaperDesign| Variant | Default | Hover (mock) | Pressed (mock) | Keyboard focus (mock) | Disabled | Loading |
|---|---|---|---|---|---|---|
| primary | ||||||
| secondary | ||||||
| ghost | ||||||
| elevated | ||||||
| accent | ||||||
| accent-soft | ||||||
| accent-ghost | ||||||
| danger | ||||||
| danger-soft | ||||||
| danger-ghost | ||||||
| chrome |
sm · 24
compact · 30
md · 32
lg · 36
icon-xs · 20
icon-sm · 24
icon-md · 28
icon · 32
icon-lg · 36
icon-xl · 44
| Variant | Default | Hover (mock) | Pressed (mock) | Keyboard focus (mock) | Disabled | Loading |
|---|---|---|---|---|---|---|
| primary | ||||||
| secondary | ||||||
| ghost | ||||||
| elevated | ||||||
| accent | ||||||
| accent-soft | ||||||
| accent-ghost | ||||||
| danger | ||||||
| danger-soft | ||||||
| danger-ghost | ||||||
| chrome |
sm · 24
compact · 30
md · 32
lg · 36
icon-xs · 20
icon-sm · 24
icon-md · 28
icon · 32
icon-lg · 36
icon-xl · 44