Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Toast overview

Toast renders short-lived notifications in a fixed viewport and manages queue trimming, dismissal timing, action buttons, and focus-aware Escape behavior for you.

Imports

Use TngToastComponent when you want the wrapper’s built-in queue and minimum notification shell. Reach for the headless toast page when you need to own the markup and timers yourself.

Component import

ts
import { TngButtonComponent, TngToastComponent } from '@tailng-ui/components';

Wrapper variants

The same wrapper queue rendered with the default shell and themed through surrounding page styles.

Wrapper toast controls (plain CSS)

No action callbacks yet.

Accessibility baseline

  • Neutral and success toasts announce with role="status".
  • Warning and danger toasts announce with role="alert".
  • Escape dismisses the focused toast when possible, or the latest toast in the stack.
  • Use duration: 0 only when the message requires explicit acknowledgement.