Components · toasts
Toasts. Queue, slide, dismiss.
Floating notifications with auto-dismiss after 4s. Five tones, six positions, programmatic API.
01 · base
.lsd-toast
Click a trigger — toast is enqueued, auto-dismisses after 4 seconds. Close button or click-X dismisses early.
tones
Fire toasts
Five variants — same shell, different tone.
LSDToast.show({ tone: 'success', text: '…' })positions
Six placements
Pick a corner or center edge.
.lsd-toast-region--bottom-right
02 · variants
Five tone variants
Static previews of each tone.
.lsd-toast--info
Info
Informational — passive.
ⓘToast example body
.lsd-toast--info
.lsd-toast--success
Success
Operation succeeded.
✓Toast example body
.lsd-toast--success
.lsd-toast--warning
Warning
Warn the user.
!Toast example body
.lsd-toast--warning
.lsd-toast--danger
Danger
Error or failure.
✕Toast example body
.lsd-toast--danger
.lsd-toast--neutral
Neutral
Generic announcement.
·Toast example body
.lsd-toast--neutral
03 · animations
Slide-in / fade-out
Default entrance slides up + fades in; exit fades up. Reduced-motion users get instant appear/disappear.
demo
Fire one
Watch the bottom-right corner.
@keyframes lsd-toast-in
Components · LSD primitives