Alert — Core

Alerts

Contextual feedback messages for typical user actions. Choose from semantic color variants, add dismissible close buttons, or combine icons with text for richer communication. Alerts are fully CSS-driven — no JavaScript required for static use.

Semantic Variants

Primary. A general informational message for the user.

Success. Your changes have been saved successfully.

Warning. Your subscription expires in 3 days.

Danger. Unable to connect to the server. Please try again.

Tip. You can customize alert colors via CSS variables.

<!-- Primary alert -->
<div class="vd-alert vd-alert-primary">
  <i class="ph ph-info"></i>
  <div><strong>Primary.</strong> A general message.</div>
</div>

<!-- Success alert -->
<div class="vd-alert vd-alert-success">
  <i class="ph ph-check-circle"></i>
  <div>Your changes have been saved.</div>
</div>

<!-- Warning alert -->
<div class="vd-alert vd-alert-warning">...</div>

<!-- Danger alert (.vd-alert-error remains as an alias) -->
<div class="vd-alert vd-alert-danger">...</div>

<!-- Info alert -->
<div class="vd-alert vd-alert-info">...</div>

Dismissible & With Actions

Profile updated successfully.

Storage warning. You are using 95% of your quota. Upgrade now

New features available

Dark mode, custom themes, and more are now live. Learn more

<!-- Dismissible alert -->
<div class="vd-alert vd-alert-success vd-alert-dismissible">
  <i class="ph ph-check-circle"></i>
  <div>Profile updated.</div>
  <button class="vd-alert-close" aria-label="Close alert">&times;</button>
</div>

<!-- Alert with link -->
<div class="vd-alert vd-alert-warning">
  <i class="ph ph-warning"></i>
  <div>
    Storage warning. <a href="#" class="vd-alert-link">Upgrade now</a>
  </div>
</div>

<!-- Alert with heading -->
<div class="vd-alert vd-alert-primary">
  <i class="ph ph-info"></i>
  <div>
    <h5 class="vd-alert-heading">New features</h5>
    <p class="vd-mb-0 vd-text-sm">Dark mode and more.</p>
  </div>
</div>

CSS Variables

Variable	Default	Description
`--vd-alert-padding-x`	`1.3125rem (21px)`	Horizontal padding (Fibonacci)
`--vd-alert-padding-y`	`0.8125rem (13px)`	Vertical padding (Fibonacci, ratio ~phi)
`--vd-alert-border-radius`	`var(--vd-btn-border-radius)`	Corner rounding
`--vd-alert-border-width`	`1px`	Border thickness
`--vd-alert-primary-bg`	`var(--vd-color-primary-alpha-10)`	Primary variant background
`--vd-alert-success-bg`	`var(--vd-color-success-alpha-10)`	Success variant background
`--vd-alert-warning-bg`	`var(--vd-color-warning-alpha-10)`	Warning variant background
`--vd-alert-error-bg`	`var(--vd-color-error-alpha-10)`	Error variant background
`--vd-alert-info-bg`	`var(--vd-color-info-alpha-10)`	Info variant background

API Reference

Usage

<script setup lang="ts">
import { VdAlert } from "@vanduo-oss/vd3";
</script>

<template>
  <VdAlert variant="success" title="Saved">Your changes are saved.</VdAlert>

  <!-- danger replaces the former error spelling -->
  <VdAlert variant="danger" dismissible @dismiss="onDismiss">
    Unable to connect to the server.
  </VdAlert>
</template>

CSS Classes

Class	Description
`.vd-alert`	Base alert container. Flex layout with icon + content.
`.vd-alert-primary`	Blue accent variant for general information.
`.vd-alert-success`	Green accent variant for positive feedback.
`.vd-alert-warning`	Amber accent variant for cautionary messages.
`.vd-alert-danger`	Red accent variant — the unified status name (matches Vue variant="danger").
`.vd-alert-error`	Retained backward-compatible alias for .vd-alert-danger.
`.vd-alert-info`	Cyan accent variant for tips and hints.
`.vd-alert-dismissible`	Adds right padding for a close button.
`.vd-alert-close`	Close button positioned at top-right.
`.vd-alert-link`	Styled link inside an alert with matching variant color.
`.vd-alert-heading`	Heading style for titled alerts.
`.vd-alert-icon`	Flex container for the icon (auto-generated structure).

Component API (Vue 3)

Prop / slot / event	Description
`:variant`	primary \| secondary \| success \| warning \| danger \| info (default "info"). Selects the leading icon automatically.
`:title`	Optional bold title rendered above the slot content.
`:dismissible`	Renders a close button that emits dismiss.
`default slot`	Alert body content.
`@dismiss`	Emitted when the close button is clicked.

Accessibility

Use role="alert" on dynamically injected alerts so screen readers announce them immediately.
Dismissible alerts should have a button with an aria-label="Close alert", not just an icon.
Icons inside alerts should have aria-hidden="true" if they are decorative; otherwise provide text alternatives.
Color is never the sole indicator — pair variants with distinct icons and clear text.
Alert links (.vd-alert-link) maintain sufficient contrast against all variant backgrounds.