Alert

Usage

import { Alert } from '@hareui/vue'

New features available

Check out our latest updates including dark mode support and improved accessibility features.

Update available

A new version of the application is available. Please refresh to get the latest features and bug fixes.

Unable to connect to server

We're experiencing connection issues. Please try the following:

Check your internet connection
Refresh the page
Clear your browser cache

Profile updated successfully

Processing your request

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

Scheduled maintenance

Our services will be unavailable on Sunday, March 15th from 2:00 AM to 6:00 AM UTC for scheduled maintenance.

<script setup lang="ts">import { Alert, Button, CloseButton, Spinner } from '@hareui/vue'</script><template>  <div class="grid w-full max-w-xl gap-4">    <!-- Default - General information -->    <Alert      title="New features available"      description="Check out our latest updates including dark mode support and improved accessibility features."    />    <!-- Accent - Important information with action -->    <Alert      status="accent"      title="Update available"      description="A new version of the application is available. Please refresh to get the latest features and bug fixes."    >      <Button class="mt-2 sm:hidden" size="sm" variant="primary">        Refresh      </Button>      <template #trailing>        <Button class="hidden sm:block" size="sm" variant="primary">          Refresh        </Button>      </template>    </Alert>    <!-- Danger - Error with detailed steps -->    <Alert status="danger" title="Unable to connect to server">      <template #description>        We're experiencing connection issues. Please try the following:        <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>      </template>      <Button class="mt-2 sm:hidden" size="sm" variant="danger">        Retry      </Button>      <template #trailing>        <Button class="hidden sm:block" size="sm" variant="danger">          Retry        </Button>      </template>    </Alert>    <!-- Without description -->    <Alert status="success" title="Profile updated successfully">      <template #trailing>        <CloseButton />      </template>    </Alert>    <!-- Custom indicator - Loading state -->    <Alert      status="accent"      title="Processing your request"      description="Please wait while we sync your data. This may take a few moments."    >      <template #indicator>        <Spinner size="sm" />      </template>    </Alert>    <!-- Without close button -->    <Alert      status="warning"      title="Scheduled maintenance"      description="Our services will be unavailable on Sunday, March 15th from 2:00 AM to 6:00 AM UTC for scheduled maintenance."    />  </div></template>

HeroUI's compound parts (Alert.Indicator, Alert.Content, Alert.Title, Alert.Description) become props and named slots, rendered in a fixed order: #leading, indicator, content, then #trailing.

<Alert status="…" title="…" description="…">
  <template #leading /> <!-- unwrapped children before the indicator (e.g. a background) -->
  <template #indicator /> <!-- replaces the status icon -->
  <template #title /> <!-- or: replaces the title text -->
  <template #description /> <!-- or: replaces the description text -->
  <!-- default slot = extra children of Alert.Content, after the description -->
  <template #trailing /> <!-- children after Alert.Content (actions, CloseButton) -->
</Alert>

The indicator renders by default with the status icon; set :indicator="false" to omit it.
The title and description render only when their prop or slot is provided.

ui keys: base, indicator, content, title, description.

Customization

Tailwind CSS

Payment method expires soon

Your Visa ending in 4242 expires on March 28. Update billing to avoid interrupting your Pro subscription.

<script setup lang="ts">import { Alert, Button, CloseButton } from '@hareui/vue'</script><template>  <div class="w-full max-w-xl">    <Alert      class="relative overflow-hidden rounded-xl border border-warning/20 bg-linear-to-br from-warning/10 via-surface to-surface-secondary shadow-sm dark:border-warning/30 dark:from-warning/15 dark:via-surface dark:to-warning/5"      status="warning"      title="Payment method expires soon"      description="Your Visa ending in 4242 expires on March 28. Update billing to avoid interrupting your Pro subscription."      :ui="{ indicator: 'relative text-warning', content: 'relative' }"    >      <template #leading>        <div          aria-hidden="true"          class="pointer-events-none absolute -top-8 -right-8 size-28 rounded-full bg-warning/15 blur-2xl dark:bg-warning/25"        />      </template>      <Button class="mt-3 sm:hidden" size="sm" variant="tertiary">        Update billing      </Button>      <template #trailing>        <Button class="relative hidden shrink-0 sm:inline-flex" size="sm" variant="tertiary">          Update billing        </Button>        <CloseButton class="relative" />      </template>    </Alert>  </div></template>

Global theme override

Override the alert theme app-wide with createHareUI:

app.use(createHareUI({
  ui: {
    alert: {
      slots: { base: 'rounded-2xl shadow-lg', title: 'font-bold text-lg' },
      variants: {
        status: { danger: { base: 'border-l-4 border-red-600' } },
      },
    },
  },
}))

Styling Reference

Each rendered element carries the same data-slot string as HeroUI, so selectors translate 1:1.

`ui` key	`data-slot`	Description
`base`	`alert-root`	Base alert container
`indicator`	`alert-indicator`	Icon/indicator container
`content`	`alert-content`	Content wrapper for title and description
`title`	`alert-title`	Alert title text (renders as `p`)
`description`	`alert-description`	Alert description text (renders as `span`)

HeroUI's status modifier classes correspond to the status prop (HareUI renders utilities, not BEM classes, so style through class, ui or createHareUI): .alert--default, .alert--accent, .alert--success, .alert--warning, .alert--danger.

Prop	Type	Default	Description
`as`	`AsTag \| Component`	`"div"`	The element or component to render as.
`status`	`"default" \| "accent" \| "success" \| "warning" \| "danger"`	`'default'`	The visual status of the alert. Also picks the default indicator icon.
`title`	`string`	-	Title text.
`description`	`string`	-	Description text rendered under the title.
`indicator`	`boolean`	`true`	Show the indicator. Set to `false` to render the alert without one.
`ui`	`ComponentSlots<{ slots: { base: string; indicator: string; content: string; title: string; description: string; }; variants: { status: { default: { indicator: string; title: string; }; accent: { indicator: string; title: string; }; success: { indicator: string; title: string; }; warning: { indicator: string; title: string; }; danger: { indicator: string; title: string; }; }; }; defaultVariants: { status: string; }; }>`	-	Per-slot class overrides.

Slots

Slot	Props	Description
`leading`	`any`	Content rendered inside the root before the indicator, without a wrapper (e.g. a decorative background).
`indicator`	`any`	Replaces the status icon inside the indicator.
`title`	`any`	Replaces the title text.
`description`	`any`	Replaces the description text.
`default`	`any`	Extra content rendered inside the content wrapper, after the description (e.g. an action button).
`trailing`	`any`	Content rendered after the content wrapper (e.g. actions or a close button).

Button

CloseButton

Spinner

Usage

Anatomy

Customization

Tailwind CSS

Global theme override

Styling Reference

Interactive States

API Reference

Props

Slots

On this page