Skip to main content

Overlays

Toast

Live region for non-blocking notifications. Auto-dismisses.

Element
<output>
Module
@basenative/components
Function
renderToastContainer

Quick start

Import the render function and call it from your server template.

import { showToast, renderToastContainer } from '@basenative/components';

showToast({ message: 'Saved.', variant: 'success' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Live region

Click the buttons to push toasts. They auto-dismiss after a few seconds.

Live render
Source
import { showToast } from '@basenative/components';

showToast({ message: 'Saved.', variant: 'success' });

Options

Arguments accepted by renderToastContainer().

renderToastContainer option reference
Option Type Default Description
position 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' 'top-right' Container corner.