elements
Alert
Display an alert element to draw attention.
Usage
Pass a title
to your Alert.
Heads up!
<UAlert title="Heads up!" />
Description
You can add a description
in addition of the title
.
Heads up!
You can add components to your app using the cli.
<UAlert description="You can add components to your app using the cli." />
Icon
Use any icon from Iconify by setting the icon
prop by using this pattern: i-{collection_name}-{icon_name}
or change it globally in ui.alert.default.icon
.
Heads up!
You can add components to your app using the cli.
<UAlert icon="i-heroicons-command-line" description="You can add components to your app using the cli." />
Avatar
Use the avatar prop as an object
and configure it with any of its props.
Heads up!
You can add components to your app using the cli.
<UAlert description="You can add components to your app using the cli." :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }" />
Style
Use the color
and variant
props to change the visual style of the Alert.
color
can be any color from theui.colors
object orwhite
(default).variant
can besolid
(default),outline
,soft
orsubtle
.
Heads up!
You can add components to your app using the cli.
<UAlert icon="i-heroicons-command-line" color="primary" variant="solid" />
Close
Use the close-button
prop to hide or customize the close button on the Alert.
You can pass all the props of the Button component to customize it through the close-button
prop or globally through ui.alert.default.closeButton
.
It defaults to null
which means no close button will be displayed. A close
event will be emitted when the close button is clicked.
Heads up!
<UAlert :close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'gray', variant: 'link', padded: false }" />
Actions
Use the actions
prop to add actions to the Alert.
Like for closeButton
, you can pass all the props of the Button component plus a click
function in the action but also customize the default style for the actions globally through ui.alert.default.actionButton
.
Heads up!
<UAlert :actions="[{ label: 'Action 1' }, { variant: 'ghost', color: 'gray', label: 'Action 2' }]" />
Actions will render differently whether you have a description
set.
Heads up!
You can add components to your app using the cli.
<UAlert :actions="[{ variant: 'solid', color: 'primary', label: 'Action 1' }, { variant: 'outline', color: 'primary', label: 'Action 2' }]" />
Slots
title
/ description
Use the #title
and #description
slots to customize the Alert.
This can be handy when you want to display HTML content. To achieve this, you can define those slots and use the v-html
directive.
Heads up!
You can add components to your app using the cli.
<template> <UAlert title="Heads <i>up</i>!" icon="i-heroicons-command-line"> <template #title="{ title }"> <span v-html="title" /> </template> <template #description> You can add <b>components</b> to your app using the <u>cli</u>. </template> </UAlert></template>
Props
config.default.color
config.default.variant
config.default.icon
undefined
null
null
config.default.closeButton as Button
[]
Preset
{ "wrapper": "w-full relative overflow-hidden", "title": "text-sm font-medium", "description": "mt-1 text-sm leading-4 opacity-90", "shadow": "", "rounded": "rounded-lg", "padding": "p-3", "icon": { "base": "flex-shrink-0 w-5 h-5" }, "avatar": { "base": "flex-shrink-0 self-center", "size": "md" }, "color": { "white": { "solid": "text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800" } }, "variant": { "solid": "bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900", "outline": "text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400", "soft": "bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400", "subtle": "bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25" }, "default": { "color": "white", "variant": "solid", "icon": null, "closeButton": null, "actionButton": { "size": "xs", "color": "primary", "variant": "link" } }}