Alert

Display important messages and notifications with status-aware indicators.

Import

import { Alert, AlertContent, AlertDescription, AlertIndicator, AlertTitle } from '@heroui-vue/vue'

Usage

New features available

Check out the latest updates including dark mode support and improved accessibility states.

Update available

A new version is available. Refresh to get the latest components and bug fixes.

Profile updated successfully

Scheduled maintenance

Services will be unavailable on Sunday from 2:00 AM to 6:00 AM UTC.

Unable to connect to server

Try the following steps:

• Check your internet connection
• Refresh the page
• Clear your browser cache

Processing your request

Please wait while we sync your data. This may take a few moments.

<template>
  <div class="grid w-full max-w-xl gap-4">
    <Alert>
      <AlertIndicator />
      <AlertContent>
        <AlertTitle>New features available</AlertTitle>
        <AlertDescription>
          Check out the latest updates including dark mode support and improved accessibility
          states.
        </AlertDescription>
      </AlertContent>
    </Alert>

    <Alert status="accent">
      <AlertIndicator />
      <AlertContent>
        <AlertTitle>Update available</AlertTitle>
        <AlertDescription>
          A new version is available. Refresh to get the latest components and bug fixes.
        </AlertDescription>
        <Button class="mt-2 sm:hidden" size="sm" variant="primary">Refresh</Button>
      </AlertContent>
      <Button class="hidden sm:block" size="sm" variant="primary">Refresh</Button>
    </Alert>

    <Alert status="success">
      <AlertIndicator />
      <AlertContent>
        <AlertTitle>Profile updated successfully</AlertTitle>
      </AlertContent>
      <CloseButton />
    </Alert>

    <Alert status="warning">
      <AlertIndicator />
      <AlertContent>
        <AlertTitle>Scheduled maintenance</AlertTitle>
        <AlertDescription>
          Services will be unavailable on Sunday from 2:00 AM to 6:00 AM UTC.
        </AlertDescription>
      </AlertContent>
    </Alert>

    <Alert status="danger">
      <AlertIndicator />
      <AlertContent>
        <AlertTitle>Unable to connect to server</AlertTitle>
        <AlertDescription>
          Try the following steps:
          <ul class="mt-2 list-inside list-disc space-y-1 text-sm">
            <li>Check your internet connection</li>
            <li>Refresh the page</li>
            <li>Clear your browser cache</li>
          </ul>
        </AlertDescription>
        <Button class="mt-2 sm:hidden" size="sm" variant="danger">Retry</Button>
      </AlertContent>
      <Button class="hidden sm:block" size="sm" variant="danger">Retry</Button>
    </Alert>

    <Alert status="accent">
      <AlertIndicator>
        <Spinner size="sm" />
      </AlertIndicator>
      <AlertContent>
        <AlertTitle>Processing your request</AlertTitle>
        <AlertDescription>
          Please wait while we sync your data. This may take a few moments.
        </AlertDescription>
      </AlertContent>
    </Alert>
  </div>
</template>

<script setup>
import {
  Alert,
  AlertContent,
  AlertDescription,
  AlertIndicator,
  AlertTitle,
  Button,
  CloseButton,
  Spinner,
} from '@heroui-vue/vue'
</script>

Anatomy

<template>
  <Alert>
    <AlertIndicator />
    <AlertContent>
      <AlertTitle />
      <AlertDescription />
    </AlertContent>
  </Alert>
</template>

Styling

You can pass classes to each part when a local page needs one-off styling.

<template>
  <Alert class="rounded-xl border-2 border-blue-500" status="accent">
    <AlertIndicator class="text-blue-600" />
    <AlertContent class="gap-1">
      <AlertTitle class="text-lg font-bold">Custom Alert</AlertTitle>
      <AlertDescription class="text-sm opacity-80">
        This alert has custom styling applied.
      </AlertDescription>
    </AlertContent>
  </Alert>
</template>

The component exposes the same BEM-style classes as the React source:

Slot	CSS class
alert-root	.alert
alert-indicator	.alert__indicator
alert-content	.alert__content
alert-title	.alert__title
alert-description	.alert__description

Status classes:

Status	CSS class
default	.alert--default
accent	.alert--accent
success	.alert--success
warning	.alert--warning
danger	.alert--danger

API

Alert

Prop	Type	Default	Description
status	'default' | 'accent' | 'success' | 'warning' | 'danger'	'default'	Visual status
class	string	undefined	Custom root class

AlertIndicator

Prop	Type	Default	Description
class	string	undefined	Custom indicator class
default slot	VNode	status icon	Custom indicator content

AlertContent / AlertTitle / AlertDescription

Prop	Type	Default	Description
class	string	undefined	Custom slot class