Button
Buttons are styled automatically on <button>, <input type="submit">, and elements with .nano-btn. The default style is primary.
Default (native elements)
Preview
<button>Button</button>
<input type="submit" value="Submit">
<input type="button" value="Click me">
<input type="reset" value="Reset">Variants
Preview
<button class="nano-btn nano-btn--primary">Primary</button>
<button class="nano-btn nano-btn--secondary">Secondary</button>
<button class="nano-btn nano-btn--destructive">Destructive</button>
<button class="nano-btn nano-btn--outline">Outline</button>
<button class="nano-btn nano-btn--ghost">Ghost</button>
<button class="nano-btn nano-btn--link">Link</button>Sizes
Preview
<button class="nano-btn nano-btn--primary nano-btn--sm">Small</button>
<button class="nano-btn nano-btn--primary">Default</button>
<button class="nano-btn nano-btn--primary nano-btn--lg">Large</button>Disabled
Preview
<button disabled>Disabled</button>
<button class="nano-btn nano-btn--outline" disabled>Disabled outline</button>