# Button · MIAN

Triggers an action. Six colour roles, five variants, four sizes, icon-only, loading and disabled states.

- Id: `button` · Category: Actions · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/button
- Use for: button, call to action button, submit button, icon button, loading button, destructive action.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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".

## Examples

### Variants

```html
<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.

```html
<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

```html
<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

```html
<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"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></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

```html
<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

```html
<button class="mn-btn mn-btn-block mn-btn-lg">Create account</button>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/button/source