Github
Docs
Toast

Toast

A succinct message that is displayed temporarily.

Installation

npx shadcn-solid@latest add toast

Usage

import { toaster } from "@kobalte/core";
import {
  Toast,
  ToastContent,
  ToastProgress,
  ToastTitle
} from "@/components/ui/toast";
toaster.show(props => (
  <Toast toastId={props.toastId}>
    <ToastContent>
      <ToastTitle>Toast</ToastTitle>
    </ToastContent>
    <ToastProgress />
  </Toast>
))

Examples

Destructive