Button
One class, a colour from the palette, and outline or mini when you need them.
Edit page
Variants
button takes the accent. dark follows the mode: dark on a light page, light on a dark one. outline keeps the border and drops the fill.
<a className='button'>Accent</a>
<a className='button dark'>Get started</a>
<a className='button dark outline'>GitHub</a>
<a className='button outline'>Outline</a>Colours
Every palette name is a variant. A light colour, listed in $light-colors, gets a dark label.
<a className='button blue'>blue</a>
<a className='button green outline'>green outline</a>Sizes
<a className='button dark'>40px</a>
<a className='button dark mini'>32px</a>
<a className='button dark r-0'>r-0</a>Classes
| Class | What it does |
|---|---|
button | 40px tall, 20px side padding, $radius, filled with $accent |
dark | filled with the text colour of the mode |
outline | border only, fills in on hover |
mini | 32px tall, 12px side padding, 14px text |
blue, green, … | any name from $palette |
r-N | any radius helper overrides $radius |