N
neokit

Toast

A fixed-position notification container. Built with DaisyUI's toast class. Place <Alert> or raw alert divs inside. Supports nine position combinations (3 horizontal × 3 vertical).

Default position

Default is horizontal="end" (right) and vertical="bottom". Uses classes="absolute" here so it stays inside the demo container.

toast default

All positions

Every combination of horizontal (start / center / end) and vertical (top / middle / bottom).

toast positions
start-top
start/top
center-top
center/top
end-top
end/top
start-middle
start/middle
center-middle
center/middle
end-middle
end/middle
start-bottom
start/bottom
center-bottom
center/bottom
end-bottom
end/bottom

Stacked alerts

Multiple children stack vertically inside the toast container.

toast stacked

Color variants

Use any Alert color inside a toast.

toast colors

Top-start

horizontal="start" vertical="top" — common for system notifications in LTR layouts.

toast top-start

Center-middle

horizontal="center" vertical="middle" — draws attention to critical messages.

toast center-middle

Usage pattern

In production, omit classes="absolute" so the toast is fixed to the viewport. Combine with JS to dynamically add / remove alert children.

toast usage code 
import Toast from '@ppreeper/neokit/components/Toast.astro';
import Alert from '@ppreeper/neokit/components/Alert.astro';
// Fixed to viewport (default, no classes override)
<Toast horizontal="end" vertical="bottom">
  <Alert color="success"><span>Saved!</span></Alert>
</Toast>