mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
302 lines
4.8 KiB
Markdown
302 lines
4.8 KiB
Markdown
---
|
|
description: A callout to draw user's attention.
|
|
category: element
|
|
links:
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Alert.vue
|
|
---
|
|
|
|
## 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](/components/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](/components/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](/components/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](/components/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](/components/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](/components/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
|