Toast

Toast is a compound component that provides toast functionality.

Active

Toast Title

Toast

variant:

Examples

variant

Different variant options for the Toast component.

default

Toast Title

Toast

destructive

Toast Title

Toast

Installation

npm install @your-design-system/toast

import { Toast } from "@/components/ui/toast"

export function ToastDemo() {
  return (
    <Toast variant="default">
      {/* Content */}
    </Toast>
  )
}

API Reference

Prop	Type	Default	Description
`title`	`string`	-	The title prop for the component.
`description`	`string`	-	The description prop for the component.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

grouppointer-events-autorelativeflexw-fullitems-centerjustify-betweenspace-x-4overflow-hiddenrounded-mdp-6pr-8shadow-lgtransition-all

variant Variants

default

borderbg-backgroundtext-foreground

destructive

destructiveborder-destructivebg-destructivetext-destructive-foreground

Design System Compliance

This component is validated against atomic design principles and foundation token usage.

⚠ Atomic Design Issues

Issue 1Hardcoded spacing found: p-6. Use semantic spacing tokens.

Fix these issues to ensure your component integrates properly with the design system.

On This Page