Toast

1.0.0

Temporary status messages with stacking, swipe dismiss, actions, and success, info, warning, and error types.

npx jabkit add toast

Component Data

ID: toast
Category: atoms
Version: 1.0.0
Added: 2026-09-06
Type: component
Keyboard nav: Yes
Reduced motion: Yes

toastnotificationfeedbackalertatom

Dependencies

@base-ui/react
lucide-react
clsx
tailwind-merge

Examples

Default

<Toaster>
      <Button
        onClick={() =>
          toast.add({
            title: toastMocks.default.title,
            description: toastMocks.default.description,
          })
        }
      >
        Show toast
      </Button>
    </Toaster>

Variants

<div className="flex flex-col gap-3 bg-background p-8 text-foreground">
      <Toaster>
        <div className="flex flex-wrap gap-2">
          <Button
            onClick={() =>
              toast.add({
                title: toastMocks.types[0].title,
                description: toastMocks.types[0].description,
                type: toastMocks.types[0].type,
              })
            }
          >
            Success
          </Button>
          <Button
            variant="secondary"
            onClick={() =>
              toast.add({
                title: toastMocks.action.title,
                description: toastMocks.action.description,
                actionProps: { children: toastMocks.action.actionLabel },
              })
            }
          >
            With action
          </Button>
          <Button
            variant="destructive"
            onClick={() =>
              toast.add({
                title: toastMocks.types[3].title,
                description: toastMocks.types[3].description,
                type: toastMocks.types[3].type,
              })
            }
          >
            Error
          </Button>
        </div>
      </Toaster>
    </div>