LifeDS

Component

Sonner

Toast notifications powered by the sonner library. Click any button to trigger a toast.

toast(message, options)description · action · position
toast.success / .info / .warning / .errorstyled variants
toast.promiseloading · success · error states

Basic

toast("Event has been created")

With description

description shown below the message

With action

clickable action button

Variants

success · info · warning · error

Promise-based

loading → success/error based on promise resolution

Position

controls where the toast appears on screen

Tokens used

5 semantic tokens consumed by this component.

--popoverPopover
bg-popover
--popover-foregroundPopover Foreground
text-popover-foreground
--borderBorder
border-borderborder
--primaryPrimary
bg-primarytext-primaryborder-primaryring-primary
--destructiveDestructive
bg-destructivetext-destructiveborder-destructivering-destructive