Toast

Compact notification card for transient results, with a tone-based icon. The size prop (xs, sm, md, lg, xl) scales padding, icon, text and max width.

Jump to API reference

Import

Vue

import { UiToast } from '@ziyarago/ui/vue'

Tones

SavedGuest details were updated.

Upload failedThe passport scan is too large.

Session expiringYou will be signed out in 2 minutes.

New messageYour guide sent you the meeting point.

Vue

<UiToast tone="success" title="Saved">
  Guest details were updated.
</UiToast>

<UiToast tone="danger" title="Upload failed">
  The passport scan is too large.
</UiToast>

<UiToast tone="warning" title="Session expiring">
  You will be signed out in 2 minutes.
</UiToast>

<UiToast tone="info" title="New message">
  Your guide sent you the meeting point.
</UiToast>

Sizes

SavedGuest details were updated.

Vue

<UiToast size="xs" tone="success" title="Saved">
  Guest details were updated.
</UiToast>

<UiToast size="sm" tone="success" title="Saved">
  Guest details were updated.
</UiToast>

<UiToast size="md" tone="success" title="Saved">
  Guest details were updated.
</UiToast>

<UiToast size="lg" tone="success" title="Saved">
  Guest details were updated.
</UiToast>

<UiToast size="xl" tone="success" title="Saved">
  Guest details were updated.
</UiToast>

API reference

Static toast card with a tone icon, title and text; use for transient confirmations rendered in your own toast stack.

Props

PropType and valuesDefaultDescription

toneinfosuccesswarningdanger'info'Color and icon.

titlestring—Bold first line.

sizexssmmdlgxl'md'Scale of padding, icon, text and max width.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultMessage text.

Notes

Presentational only: it has no timer, close button or positioning. Mount and unmount it yourself.
Has role="status".