leptos-shadcn-ui/docs/components/api/toast.md

Toast Component API

A temporary notification component for displaying brief messages.

---

Installation

# Cargo.toml
[dependencies]
shadcn-ui-leptos-toast = "0.7"

use shadcn_ui_leptos_toast::Toast;

---

Import

use shadcn_ui_leptos_toast::{
    Toast,
    ToastProvider,
    ToastTitle,
    ToastDescription,
    ToastAction,
    ToastClose,
    ToastVariant
};

---

Component API

ToastProvider

Context provider for toast notifications.

Prop	Type	Default	Description
children	Option<Children>	None	App content

Toast

Individual toast notification.

Prop	Type	Default	Description
variant	MaybeProp<ToastVariant>	Default	Toast style
title	MaybeProp<String>	None	Toast title
description	MaybeProp<String>	None	Toast description
duration	MaybeProp<u64>	5000	Auto-close duration (ms)
on_close	Option<Callback<()>>	None	Close callback

ToastVariant

pub enum ToastVariant {
    Default,     // Neutral styling
    Destructive, // Red for errors
    Success,     // Green for success
}

---

Usage Examples

Basic Toast

use leptos::prelude::*;
use shadcn_ui_leptos_toast::*;

#[component]
pub fn MyComponent() -> impl IntoView {
    view! {
        <ToastProvider>
            <div>
                <button on:click=move |_| {
                    // Show toast
                }>"Show Toast"</button>
            </div>
        </ToastProvider>
    }
}

---

CSS Classes

.toast {
    group pointer-events-auto relative flex w-full
    items-center justify-between space-x-4 overflow-hidden
    rounded-md border p-6 pr-8 shadow-lg transition-all
}

.toast-default {
    border bg-background text-foreground
}

.toast-destructive {
    border-destructive bg-destructive text-destructive-foreground
}

.toast-success {
    border-success bg-success text-success-foreground
}

---

Accessibility

ARIA Attributes

• role="status" - Status role
• aria-live="polite" - Polite announcements
• aria-atomic="true" - Complete content reading

---

TypeScript API

interface ToastProps {
  variant?: 'default' | 'destructive' | 'success';
  title?: string;
  description?: string;
  duration?: number;
  onClose?: () => void;
}

export const Toast: React.FC<ToastProps>;
export const ToastProvider: React.FC<{ children: React.ReactNode }>;
export const ToastTitle: React.FC<ComponentProps>;
export const ToastDescription: React.FC<ComponentProps>;
export const ToastAction: React.FC<ButtonProps>;
export const ToastClose: React.FC<ButtonProps>;

---

Source: packages/leptos/toast/src/default.rs