Components
Alert
Communicate status with banners, tonal alerts, snackbars, and toasts.
UiAlert surfaces a message. type controls the surface (banner, tonal, snackbar) and variant the intent (success, warning, danger, …). For programmatic toasts, use useToast.
Show a banner alert
<template>
<UiAlert
type="banner"
variant="success"
title="Saved"
message="Your changes were saved."
/>
</template>
Use tonal and critical styles
<template>
<UiAlert type="tonal" variant="info" message="Heads up — read this." />
<UiAlert
type="tonal"
variant="danger"
title="Error"
message="Something went wrong."
:critical="true"
/>
</template>
Position a snackbar
placement only applies when type="snackbar":
<template>
<UiAlert
type="snackbar"
variant="warning"
message="Connection lost"
placement="bottom-right"
/>
</template>
Trigger a toast programmatically
import { useToast } from '@colorffy/ui'
const toast = useToast()
toast.show({ message: 'Saved!', variant: 'success', placement: 'bottom-right', duration: 3000 })
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'banner' | 'tonal' | 'snackbar' | 'banner' | Surface style. |
variant | 'primary' | 'secondary' | 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'transparent' | 'default' | 'danger' | Intent color. |
title | string | — | Optional title. |
message | string | — | Body text. |
size | 'sm' | — | Smaller size. |
critical | boolean | false | Emphasized critical styling. |
rounded | boolean | false | Fully rounded shape. |
placement | 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'bottom' | Snackbar position. |
customClass | string | string[] | Record<string, boolean> | — | Extra classes. |
Slots: #content, #actions.