Alert

Temporary notifications that provide concise feedback about actions or events

Installation

npm

npm add @heroui-vue/alert

pnpm

pnpm add @heroui-vue/alert

yarn

yarn add @heroui-vue/alert

bun

bun add @heroui-vue/alert

NOTE

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

Import

On-demand import

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

Global import

import { Alert } from 'heroui-vue'

Usage

PreviewSource Code

This is an alert

Thanks for subscribing to our newsletter!

Colors

Alert has 6 color variants to convey different meanings.

PreviewSource Code

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

Variants

PreviewSource Code

This is a solid alert

This is a bordered alert

This is a flat alert

This is a faded alert

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.

PreviewSource Code

An alert with a custom icon

Without Icon

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

PreviewSource Code

This is an alert

Thanks for subscribing to our newsletter!

Without Icon Wrapper

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

PreviewSource Code

Bordered Alert

This is a bordered variant alert