4.8 KiB
description, category, links
| description | category | links | |||||||
|---|---|---|---|---|---|---|---|---|---|
| A callout to draw user's attention. | element |
|
Usage
Title
Use the title prop to set the title of the Alert.
::component-code
props: title: 'Heads up!'
::
Description
Use the description prop to set the description of the Alert.
::component-code
prettier: true props: title: 'Heads up!' description: 'You can change the primary color in your app config.'
::
Icon
Use the icon prop to show an Icon.
::component-code
prettier: true ignore:
- title
- description props: title: 'Heads up!' description: 'You can change the primary color in your app config.' icon: 'i-lucide-terminal'
::
Avatar
Use the avatar prop to show an Avatar.
::component-code
prettier: true ignore:
- title
- description props: title: 'Heads up!' description: 'You can change the primary color in your app config.' avatar.src: 'https://github.com/nuxt.png'
::
Color
Use the color prop to change the color of the Alert.
::component-code
prettier: true ignore:
- title
- description
- icon props: color: neutral title: 'Heads up!' description: 'You can change the primary color in your app config.' icon: 'i-lucide-terminal'
::
Variant
Use the variant prop to change the variant of the Alert.
::component-code
prettier: true ignore:
- title
- description
- icon props: color: neutral variant: subtle title: 'Heads up!' description: 'You can change the primary color in your app config.' icon: 'i-lucide-terminal'
::
Close
Use the close prop to display a Button to dismiss the Alert.
::tip
An update:open event will be emitted when the close button is clicked.
::
::component-code
prettier: true ignore:
- title
- description
- close
- color
- variant props: title: 'Heads up!' description: 'You can change the primary color in your app config.' color: neutral variant: outline close: true
::
You can pass any property from the Button component to customize it.
::component-code
prettier: true ignore:
- title
- description
- close.color
- close.variant
- color
- variant props: title: 'Heads up!' description: 'You can change the primary color in your app config.' color: neutral variant: outline close: color: primary variant: outline class: 'rounded-full'
::
Close Icon
Use the close-icon prop to customize the close button Icon. Defaults to i-lucide-x.
::component-code
prettier: true ignore:
- title
- description
- close
- color
- variant props: title: 'Heads up!' description: 'You can change the primary color in your app config.' color: neutral variant: outline close: true closeIcon: 'i-lucide-arrow-right'
::
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your app.config.ts under ui.icons.close key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your vite.config.ts under ui.icons.close key.
:::
::
Actions
Use the actions prop to add some Button actions to the Alert.
::component-code
prettier: true ignore:
- title
- actions
- color
- variant
props:
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
color: neutral
variant: outline
actions:
- label: Action 1
- label: Action 2 color: neutral variant: subtle
::
Orientation
Use the orientation prop to change the orientation of the Alert.
::component-code
prettier: true ignore:
- title
- actions
- color
- variant
props:
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
color: neutral
variant: outline
orientation: horizontal
actions:
- label: Action 1
- label: Action 2 color: neutral variant: subtle
::
Examples
class prop
Use the class prop to override the base styles of the Alert.
::component-code
prettier: true ignore:
- title
- description props: title: 'Heads up!' description: 'You can change the primary color in your app config.' class: 'rounded-none'
::
ui prop
Use the ui prop to override the slots styles of the Alert.
::component-code
prettier: true ignore:
- ui
- title
- description
- icon props: title: 'Heads up!' description: 'You can change the primary color in your app config.' icon: i-lucide-rocket ui: icon: 'size-11'
::
API
Props
:component-props
Slots
:component-slots
Emits
:component-emits
Theme
:component-theme