```astro
---
import { Button } from "@/components/starwind/button";
---
```
```tsx
import { Button } from "@/components/starwind/button";
import { toast } from "@starwind-ui/react/toast";
export function Example() {
return (
);
}
```
> **Info:** The styled package supplies the Toaster markup, while imperative notifications now come from the framework primitive entrypoint: `@starwind-ui/astro/toast`.
## Installation
```bash
npx starwind@latest add toast
```
## Usage
### Setup
The `Toaster` component must be added once to your page, usually in a common layout file shared between pages so you can trigger toasts from anywhere.
```astro title="src/layouts/Layout.astro"
```
### Basic Usage
Toasts are created using the `toast` function. Import it in a `
```
> **Info:** Import `toast` from `@starwind-ui/astro/toast`; the CLI-installed styled folder no longer ships a separate toast manager.
### Variants
The toast system supports multiple variants for different message types.
```astro
---
import { Button } from "@/components/starwind/button";
---
```
> **Info:** Variant helpers are provided by the Runtime toast API imported from `@starwind-ui/astro/toast` and rendered by the installed `Toaster` templates.
### Promise Toast
Handle async operations with automatic loading, success, and error states.
```astro
---
import { Button } from "@/components/starwind/button";
---
```
> **Info:** Promise lifecycle updates now use the shared Runtime toast manager from the Astro primitive package.
### Updating & Dismissing
You can update existing toasts or dismiss them programmatically.
```astro
---
import { Button } from "@/components/starwind/button";
---
```
> **Info:** Updating and dismissing notifications uses the shared Runtime toast API rather than the removed component-local manager.
## Framework Availability
Toast is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### Toaster
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `gap` | `string` | No | `"0.5rem"` | Wrapper prop | Sets the space between repeated items. |
| `peek` | `string` | No | `"1rem"` | Wrapper prop | Sets how much of an adjacent item remains visible. |
- Inherits div attributes.
### ToastTemplate
- Inherits div attributes.
### ToastItem
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `variant` | `"default" \| "success" \| "error" \| "warning" \| "info"` | No | `"default"` | Styled variant | Selects the component's visual variant. |
- Inherits div attributes.
### ToastContent
- Inherits div attributes.
### ToastTitle
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `variant` | `"default" \| "success" \| "error" \| "warning" \| "info" \| "loading"` | No | `"default"` | Styled variant | Selects the component's visual variant. |
- Inherits div attributes.
### ToastDescription
- Inherits div attributes.
### ToastAction
- Inherits button attributes.
### ToastClose
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `showIcon` | `boolean` | No | `true` | Wrapper prop | Shows the component's generated icon. |
- Inherits button attributes.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Toast Primitive](/docs/primitives/toast/)
- Runtime factory: [`createToastManager`](/docs/runtime/#create-toast-manager) from `@starwind-ui/runtime/toast`
## Changelog
### v2.0.0
- Rebuilt Toast on Starwind Runtime for manager state, templates, updates, dismissal, and lifecycle.
- See the [Toast Primitive](/docs/primitives/toast/) for the underlying unstyled anatomy and behavior API.