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
{}
appConfig.ui.alert.default.icon
null
appConfig.ui.alert.default.color
appConfig.ui.alert.default.variant
null
appConfig.ui.alert.default.closeButton
[]
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"
}
}
}