The one component sileo-native needs. Mount it once, above the rest of your app.
<Toaster
position="top-center"
theme="system"
offset={8}
options={{ roundness: 20 }}
/>
Props
position
SileoPosition
= 'top-center'
Where toasts go unless they say otherwise.
light, dark, system, overrides, or { light, dark }. See
Theming.
appearance
'solid' | 'glass'
Overrides the theme’s appearance.
offset
number | { top, right, bottom, left }
Extra distance from the safe area, on top of 12pt of padding.
options
Partial<SileoOptions>
Defaults merged under every toast.
Toast width, capped to the screen.
Wraps the toasts, for example in
FullWindowOverlay. See
Modals.
Positions
top-left, top-center, top-right, bottom-left, bottom-center and bottom-right. Toasts at the bottom open upward. The default is top-center, which suits a phone better than the web default of top-right.
On a phone
Tap a toast with a description to open it. Every dismiss timer holds while it is open, and starts over when you tap it closed.
Swipe up or down to dismiss.
Timers pause while the app is in the background.
VoiceOver announces new toasts, TalkBack reads them through a live region, and each toast offers actions to expand, press its buttons, and dismiss.
Reduce Motion is respected.