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>

A snackbar is an inverse surface: dark in light mode, light in dark mode. Its icon takes --cffy-{variant}-inverse, and inside it --cffy-primary-base and --cffy-on-background point to their inverse tones, so a text button such as "Undo" in the actions slot stays readable without extra classes.

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

Emits: dismiss — fired when the alert is closed via the close button or the duration timer.

Slots: #content, #actions.

UiAlertToast props

Exposed: showToast(options?) shows the toast; options (IToastOptions) takes message, variant, placement and duration (auto-hide delay in ms, default 3000). Also title, message, variant and placement, the refs holding the current values.

CSS variables

Set these on :root, or on any wrapper to restyle only the alerts inside it. Banner, tonal, critical and transparent alerts keep their own colors, rounded its pill shape, and alerts with a title their wider gap. The --cffy-alert-snackbar-* and --cffy-alert-toast-* variables only affect snackbars.

:root {
  --cffy-alert-radius: var(--cffy-radius-md);
  --cffy-alert-snackbar-bg-color: var(--cffy-primary-a10);
  --cffy-alert-snackbar-color: var(--cffy-on-primary);
}