edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Get Started
Components

Toast

Premium solid notification toasts with actions, stacking, and swipe dismissal.

Componentsdocsbase-ui/toast

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/toast.json

Manual

API Reference

Provider

Provides context for toast components. Wrap once near app root.

timeoutnumber
=5000

Default auto-close time (ms)

limitnumber
=3

Max visible toasts

Viewport

A fixed area where toast notifications appear. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Root

Groups all parts of a single toast. Renders a div element.

type'foreground' | 'background'
='foreground'

Urgency type

prioritynumber

Sort order priority

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Root data attributes
AttributeDescription
data-openPresent when toast is visible
data-closedPresent when toast is closing
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out
data-expandedPresent when toast list is expanded
data-stackedPresent when toast is stacked
data-limitedPresent when toast exceeds limit
data-swipe-directionSwipe direction
Root CSS variables
VariableDescription
--toast-indexIndex in the visible toast list
--toast-countTotal number of visible toasts

Title

An accessible title for the toast. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Description

A description for the toast. Renders a div element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Close

A button that closes the toast. Renders a button element.

nativeButtonboolean
=true

Render as native button

classNamestring | function

CSS class name

renderReactElement | function

Custom render function