ui/docs/content/2.elements/2.alert.md

description, links, navigation

description	links	navigation
Display an alert element to draw attention.	label icon to GitHub i-simple-icons-github https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Alert.vue	badge New

Usage

Pass a title to your Alert.

::component-card

props: title: 'Heads up!'

::

Description

You can add a description in addition of the title.

::component-card

baseProps: title: 'Heads up!' props: 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}.

::component-card

baseProps: title: 'Heads up!' props: icon: 'i-heroicons-command-line' description: 'You can add components to your app using the cli.' excludedProps:

• icon

---

::

Avatar

Use the avatar prop as an object and configure it with any of its props.

::component-card

baseProps: title: 'Heads up!' props: description: 'You can add components to your app using the cli.' avatar: src: 'https://avatars.githubusercontent.com/u/739984?v=4' excludedProps:

• avatar

---

::

Style

Use the color and variant props to change the visual style of the Alert.

• color can be any color from the ui.colors object or white (default).
• variant can be solid (default), outline, soft or subtle.

::component-card

baseProps: title: 'Heads up!' description: 'You can add components to your app using the cli.' props: icon: 'i-heroicons-command-line' color: 'primary' variant: 'solid' extraColors:

• white excludedProps:
• icon

---

::

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.

::component-card

baseProps: title: 'Heads up!' props: closeButton: icon: 'i-heroicons-x-mark-20-solid' color: 'gray' variant: 'link' padded: false excludedProps:

• closeButton

---

::

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.

::component-card

baseProps: title: 'Heads up!' props: actions: - label: Action 1 - variant: 'ghost' color: 'gray' label: Action 2 excludedProps:

• actions

---

::

Actions will render differently whether you have a description set.

::component-card

baseProps: title: 'Heads up!' description: 'You can add components to your app using the cli.' props: actions: - variant: 'solid' color: 'primary' label: Action 1 - variant: 'outline' color: 'primary' label: Action 2 excludedProps:

• actions

---

::

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.

::component-example #default :alert-example-html

#code

<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

:component-props

Preset

:component-preset