Alert

Temporary notifications that provide concise feedback about actions or events

Installation

npm

npm add @vue-nextui/alert

pnpm

pnpm add @vue-nextui/alert

yarn

yarn add @vue-nextui/alert

bun

bun add @vue-nextui/alert

NOTE

If you use global installation, you can skip this installation step

Import

On-demand import

import { Alert } from '@vue-nextui/alert'

Global import

import { Alert } from 'nextui-vue'

Usage

This is an alert

Thanks for subscribing to our newsletter!

Example

<script setup lang="ts">
import { Alert } from 'nextui-vue'
</script>

<template>
  <Alert
    title="This is an alert"
    description="Thanks for subscribing to our newsletter!"
  />
</template>

Colors

Alert has 6 color variants to convey different meanings.

This is a default alert

This is a primary alert

This is a secondary alert

This is a success alert

This is a warning alert

This is a danger alert

Example

<script setup lang="ts">
import { Alert } from 'nextui-vue'
</script>

<template>
  <div style="display: grid; row-gap: 1rem;">
    <Alert
      v-for="color in ['default', 'primary', 'secondary', 'success', 'warning', 'danger']"
      :key="color"
      :color
      :title="`This is a ${color} alert`"
    />
  </div>
</template>

Variants

This is a solid alert

This is a bordered alert

This is a flat alert

This is a faded alert

Example

<script setup lang="ts">
import { Alert } from 'nextui-vue'
</script>

<template>
  <div style="display: grid; row-gap: 1rem;">
    <Alert
      v-for="variant in ['solid', 'bordered', 'flat', 'faded']"
      :key="variant"
      color="secondary"
      :variant
      :title="`This is a ${variant} alert`"
    />
  </div>
</template>

Custom Icon

By default, the Alert component displays a corresponding icon based on the color prop. You can override this behavior by providing a custom icon using the icon slot.

An alert with a custom icon

Example

<script setup lang="ts">
import { Alert } from 'nextui-vue'
</script>

<template>
  <Alert title="An alert with a custom icon">
    <template #icon>
      <svg
        data-name="Iconly/Curved/Profile"
        height="24"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g
          fill="none"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeMiterlimit="{10}"
          strokeWidth="{1.5}"
        >
          <path
            d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
            data-name="Stroke 1"
          />
          <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
        </g>
      </svg>
    </template>
  </Alert>
</template>

Without Icon

You can hide the icon by setting the hideIcon prop to true.

This is an alert

Thanks for subscribing to our newsletter!

Example

<Alert
  hideIcon
  color="success"
  description="Thanks for subscribing to our newsletter!"
  title="This is an alert"
  variant="faded"
/>

Without Icon Wrapper

You can hide the icon wrapper by setting the hideIconWrapper prop to true.

Bordered Alert

This is a bordered variant alert

Example

<Alert
  hideIconWrapper
  color="secondary"
  description="This is a bordered variant alert"
  title="Bordered Alert"
  variant="bordered"
/>