# Toast

Toast notifications that grow out of the screen edge and stack neatly. A loading toast can turn into a success in place, and you can swipe one away or let it fade.

> Composed · Free · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add toast
```

## Import

```tsx
import { useToast, ToastProvider } from "@/components/ui/toast/toast";
```

## Variants

- `action` — Action: `npx @lumioui/cli add toast-action`
- `loading` — Loading: `npx @lumioui/cli add toast-loading`
- `variants` — Export flow: `npx @lumioui/cli add toast-variants`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `children` | `React.ReactNode` | — |
| `position?` | `ToastPosition` | Where toasts appear. Default "top". |
| `defaultDuration?` | `number` | Auto-dismiss duration in ms. 0 = manual dismiss only. Default 4000. |
| `limit?` | `number` | Max simultaneous toasts. Older ones are dismissed with an exit animation. Default 4. |
| `maxVisible?` | `number` | Stack levels that peek out behind the front toast. Deeper toasts stay  queued (timers running) until a slot frees. Default 3. |
| `surface?` | `"solid" | "glass"` | Card material. "solid" (default) is an opaque card with a hairline  and soft shadow that reads in both schemes; "glass" is the Lumio glass  material for apps whose content behind is photographic / moving. |

## Icons rendered

- `x` — /icons.html?i=x

Source: https://lumioui.com/components/toast