Positions & Layout

Toastex includes a fully responsive, built-in layout engine that allows you to render toasts in 6 distinct regions of the screen.

Available Positions

  • top-right (Default)
  • top-left
  • top-center
  • bottom-right
  • bottom-left
  • bottom-center

Usage

Simply pass the position property in the options object when triggering a toast. Toastex will automatically generate a fixed container for that region if it doesn't already exist, and elegantly stack new toasts within it.

typescript
// Bottom Right (Standard desktop positioning)
Toastex.success('Downloaded successfully', { position: 'bottom-right' });

// Top Center (Great for mobile notifications)
Toastex.info('New friend request', { position: 'top-center' });

Animation Engine

Toastex handles entry and exit animations automatically based on the position. Toasts positioned at the top of the screen will slide down, while toasts positioned at the bottom will slide up, ensuring a natural physical flow to the UI.