Button
Triggers an action. Six colour roles, five variants, four sizes, icon-only, loading and disabled states.
Variants
<button class="mn-btn">Primary</button>
<button class="mn-btn mn-secondary">Secondary</button>
<button class="mn-btn mn-btn-outline">Outline</button>
<button class="mn-btn mn-btn-soft">Soft</button>
<button class="mn-btn mn-btn-ghost">Ghost</button>
<button class="mn-btn mn-btn-link">Link</button>Colours
Every colour role works with every variant.
<button class="mn-btn mn-accent">Accent</button>
<button class="mn-btn mn-success">Success</button>
<button class="mn-btn mn-warning">Warning</button>
<button class="mn-btn mn-danger">Danger</button>
<button class="mn-btn mn-btn-soft mn-danger">Soft danger</button>
<button class="mn-btn mn-btn-outline mn-success">Outline success</button>Sizes
<button class="mn-btn mn-btn-xs">Extra small</button>
<button class="mn-btn mn-btn-sm">Small</button>
<button class="mn-btn">Default</button>
<button class="mn-btn mn-btn-lg">Large</button>With icons
<button class="mn-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg> Send email</button>
<button class="mn-btn mn-btn-outline">Continue <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
<button class="mn-btn mn-btn-icon mn-btn-outline" aria-label="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg></button>
<button class="mn-btn mn-btn-icon mn-btn-ghost" aria-label="More options"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></svg></button>
<button class="mn-btn mn-btn-icon mn-btn-pill mn-danger" aria-label="Delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg></button>States
<button class="mn-btn" aria-busy="true">Saving</button>
<button class="mn-btn mn-btn-outline" disabled>Disabled</button>
<a class="mn-btn mn-btn-soft" href="#button">Link styled as button</a>Block
<button class="mn-btn mn-btn-block mn-btn-lg">Create account</button>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/button.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-btn | Base button. Solid, primary colour by default. |
| mn-btn-outline | Bordered, transparent background. Neutral unless a colour role is added. |
| mn-btn-soft | Tinted background, coloured text. |
| mn-btn-ghost | No background until hover. |
| mn-btn-link | Looks like a link, behaves like a button. |
| mn-btn-xs · mn-btn-sm · mn-btn-lg | Sizes. Heights come from the noodle's density. |
| mn-btn-icon | Square, for a single icon. Give it an aria-label. |
| mn-btn-block · mn-btn-pill | Full width · fully rounded. |
| mn-primary · mn-secondary · mn-accent · mn-success · mn-warning · mn-danger · mn-info · mn-neutral | Colour roles. Combine with any variant. |
| aria-busy="true" | Loading state: hides the label, shows a spinner, blocks clicks. |
Accessibility
- Use a real <button> for actions and <a class="mn-btn"> for navigation.
- Icon-only buttons need an aria-label; the icon itself is aria-hidden.
- aria-busy="true" is announced by screen readers and prevents double submission.
- Disabled buttons use the native disabled attribute; for a focusable disabled state use aria-disabled="true".