Alert
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>
Dismissible alerts
Set dismissible to render a close button. The alert manages its own visibility internally (no v-model needed) and emits dismiss when closed:
<template>
<UiAlert
type="banner"
variant="info"
title="Heads up"
message="Click the close button to hide this alert."
dismissible
@dismiss="onDismiss"
/>
</template>
Auto-hide with duration
Set duration (ms) to auto-hide banner and tonal alerts after a delay; it also emits dismiss when the timer fires. The timer starts on mount and is cleared if the alert is dismissed manually or unmounted first. duration is ignored for type="snackbar" — use useToast/UiAlertToast's own duration option for those instead:
<template>
<UiAlert
type="tonal"
variant="success"
message="This alert hides itself automatically after 3 seconds."
:duration="3000"
@dismiss="onDismiss"
/>
</template>
Trigger a toast programmatically
Mount a UiAlertToast and pass its ref to useToast. It returns success, warning, danger, info, and primary helpers, plus a generic onToastMessage(variant, message, opts):
<script setup lang="ts">
import { useToast } from '@colorffy/ui'
import { ref } from 'vue'
const toastRef = ref(null)
const toast = useToast(toastRef)
function onSave() {
toast.success('Saved!', { duration: 3000 })
}
</script>
<template>
<UiAlertToast ref="toastRef" placement="bottom-right" />
<UiButton text="Save" @click="onSave" />
</template>
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. |
dismissible | boolean | false | Renders a close button; clicking it hides the alert and emits dismiss. |
duration | number | — | Auto-hide delay in ms for non-snackbar types; emits dismiss when it fires. |
closeLabel | string | 'Close' | Accessible label for the close button. |
Emits: dismiss — fired when the alert is closed via the close button or the duration timer.
Slots: #content, #actions.