Toast

Toasts communicate non-blocking feedback. In Nuxt / PLAI use useToastUI() / Nuxt UI toast.

Live examples

Severity variants

Sync started

Documents will update in the background.

Info CI

Saved

Your changes were applied.

Success Nuxt UI

Quota almost reached

Upgrade before the limit is hit.

Warning CI

Upload failed

Check your connection and try again.

Error Nuxt UI

Info and warning tints use CI link blue and brand orange. Success and error use Nuxt UI semantic green/red.

HTML

<div class="ci-toast ci-toast--success" role="status">
  <div>
    <p class="ci-toast__title">Saved</p>
    <p class="ci-toast__message">Your changes were applied.</p>
  </div>
</div>

Accessibility

Success / info: role="status" (polite live region).
Errors: role="alert" when immediate attention is required.
Keep copy short; link to details only when necessary.
Auto-dismiss timing: ≥5 s for non-critical messages; persist errors until dismissed.

When to use

Variant	Use	Source
`ci-toast--info`	Neutral progress or background activity	CI link blue tint
`ci-toast--success`	Completed actions	Nuxt UI green
`ci-toast--warning`	Reversible issues or approaching limits	CI brand orange tint
`ci-toast--error`	Failed operations	Nuxt UI red

Badge — inline status (not transient)
Button — retry actions after errors