Toaster

Ephemeral, non-critical confirmations. Pass action: { label, onClick } to toast() for an undo button. Critical messages belong in a banner instead.

Import

import { Toaster } from "@jcsoftdev/ui/overlays";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/overlays/toaster.

Usage

export const Default: Story = {
  render: (args) => (
    <>
      <Toaster {...args} />
      <Button onClick={() => toast("Cita agendada para Luis Ramírez, sábado 11:30")}>
        Agendar cita
      </Button>
    </>
  ),
};

Source of the Storybook story.

Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• With Undo Action
• Open By Default
• Top Right Stack

Source

packages/ui/src/overlays/toaster/toaster.tsx