Toast
Notices that stack in a corner and fan out on hover, swipe away, and can be pinned to the control that caused them.
01Preview
0102Installation
npx shadcn@latest add https://aiellie.app/r/toast.json03API reference
11From the Base UI documentation
Groups all parts of an individual toast. Renders a <div> element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| swipeDirection | 'up' | 'down' | 'left' | 'right' | ('left' | 'right' | 'up' | 'down')[] | ['down', 'right'] | Direction(s) in which the toast can be swiped to dismiss. |
| toast\* | Toast.Root.ToastObject | - | The toast to render. |
| className | string | ((state: Toast.Root.State) => string | undefined) | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
| style | React.CSSProperties | ((state: Toast.Root.State) => React.CSSProperties | undefined) | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement | ((props: HTMLProps, state: Toast.Root.State) => ReactElement) | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Data Attributes
| Attribute | Type | Description |
|---|---|---|
| data-expanded | boolean | Present when the toast is expanded in the viewport. |
| data-limited | boolean | Present when the toast was limited because the toast limit was exceeded. |
| data-swipe-direction | 'up' | 'down' | 'left' | 'right' | The direction the toast was swiped. |
| data-swiping | boolean | Present when the toast is being swiped. |
| data-type | string | The type of the toast. |
| data-starting-style | - | Present when the toast begins animating in. |
| data-ending-style | - | Present when the toast is animating out. |
CSS Variables
| Variable | Type | Description |
|---|---|---|
| --toast-height | number | Indicates the measured natural height of the toast in pixels. |
| --toast-index | number | Indicates the index of the toast in the list. |
| --toast-offset-y | number | Indicates the vertical pixels offset of the toast in the list when expanded. |
| --toast-swipe-movement-x | number | Indicates the horizontal swipe movement of the toast. |
| --toast-swipe-movement-y | number | Indicates the vertical swipe movement of the toast. |