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."
title="Heads up!"
/>
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."
title="Heads up!"
/>
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' }"
title="Heads up!"
/>
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"
title="Heads up!"
description="You can add components to your app using the cli."
/>
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 }"
title="Heads up!"
/>
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' }]"
title="Heads up!"
/>
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' }]"
title="Heads up!"
description="You can add components to your app using the cli."
/>
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 }">
<!-- eslint-disable-next-line vue/no-v-html -->
<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
undefined
config.default.color
config.default.variant
"solid"
"outline"
"soft"
"subtle"
config.default.icon
null
null
[]
config.default.closeButton as Button
Config
{
"wrapper": "w-full relative overflow-hidden",
"title": "text-sm font-medium",
"description": "mt-1 text-sm leading-4 opacity-90",
"actions": "flex items-center gap-2 mt-3 flex-shrink-0",
"shadow": "",
"rounded": "rounded-lg",
"padding": "p-4",
"gap": "gap-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"
}
}
}