Skip to content
Sapphire UIv4.1.0

Toast

Confirm a recent action without interrupting the current task. Use it for brief feedback; keep messages that require a decision in the page or a dialog.

Examples

Statuses

HTML markup

Authored custom-element markup. Register the element using Setup below. Demo buttons and their JavaScript handlers are omitted; use the methods and events in the API reference.

Attributes, methods and events

Native custom element: configure HTML attributes rather than React props. Boolean attributes use presence / absence. Registration is browser-only; server imports do not require a DOM and may export an undefined constructor.

Supported attributes read or observed by this element
Attribute
duration
Public methods
Method
show(message: string, type: ToastType = 'success', durationMs?: number)

Emitted custom events: none declared by this entry.

Setup

bun add @kongmy-dev/sapphire-ui

For an app using package components throughout, load the full stylesheet once. Add this element registration where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";
import "@kongmy-dev/sapphire-ui/elements/toast";

Mixing package and vendored components? Follow application setup.

Search documentation