# Toast · MIAN

Temporary notifications. Mian.toast() from script, or data-mn-toast on a button. Pause on hover, stack, dismiss.

- Id: `toast` · Category: Feedback · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/toast
- Use for: toast notification, snackbar, saved message, temporary notification.

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">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `Mian.toast({ title, description, color, duration, action, position })`: Creates a toast. Returns { dismiss, element }.
- `data-mn-toast="Title"`: Declarative trigger; add data-mn-toast-description and data-mn-toast-color.
- `mn-toaster[data-position]`: bottom-right (default), top-right, top-center, bottom-center.

## Accessibility

- The toaster is a polite live region; danger toasts use role="alert". Timers pause on hover and focus so there is time to read and act.
- Never put the only path to an action in a toast.

## Examples

### Triggers

```html
<button class="mn-btn mn-btn-outline" data-mn-toast="Event created" data-mn-toast-description="Sunday, 14 December at 09:00">Default</button>
<button class="mn-btn mn-btn-outline" data-mn-toast="Saved" data-mn-toast-description="Your changes are live." data-mn-toast-color="success">Success</button>
<button class="mn-btn mn-btn-outline" data-mn-toast="Could not connect" data-mn-toast-description="Check your network and try again." data-mn-toast-color="danger">Error</button>
```

### From script, with an action

```html
<button class="mn-btn" onclick="Mian.toast({ title: 'Message archived', action: { label: 'Undo', onClick: () => Mian.toast({ title: 'Restored', color: 'success' }) } })">Archive</button>
```

## Source

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