Alert — VI Design System

Variants

Success

Your changes were saved successfully.

Warning

This action cannot be undone. Review before continuing.

Error

Something went wrong. Please try again or contact support.

Info

A new version of the design system is available.

Note

This field is optional but recommended for better results.

HTML

<div class="vi-alert vi-alert--success" role="status">
  <div class="vi-alert__title">Success</div>
  <p class="vi-alert__text">Your changes were saved.</p>
</div>

<div class="vi-alert vi-alert--warning" role="alert">
  <div class="vi-alert__title">Warning</div>
  <p class="vi-alert__text">This cannot be undone.</p>
</div>

<div class="vi-alert vi-alert--error" role="alert">
  <div class="vi-alert__title">Error</div>
  <p class="vi-alert__text">Something went wrong.</p>
</div>

With actions

Session expiring

Your session expires in 5 minutes. Save your work or extend your session.

HTML — with action buttons

<div class="vi-alert vi-alert--warning" role="alert">
  <div class="vi-alert__title">Session expiring</div>
  <p class="vi-alert__text">Your session expires in 5 minutes.</p>
  <div class="vi-alert__actions">
    <button class="vi-btn vi-btn--ghost vi-btn--sm">Dismiss</button>
    <button class="vi-btn vi-btn--secondary vi-btn--sm">Extend</button>
  </div>
</div>

Accessibility: role attribute

Variant	role attribute	Why
vi-alert--success	role="status"	Non-urgent. Screen reader reads when convenient.
vi-alert--info	role="status"	Non-urgent informational message.
vi-alert--neutral	role="note"	Supplemental info, lowest urgency.
vi-alert--warning	role="alert"	Urgent. Screen reader announces immediately.
vi-alert--error	role="alert"	Urgent. Screen reader announces immediately.

Class reference

Class	Type	Description
vi-alert	Base	Required wrapper. Flex column layout, left border, padding.
vi-alert--success	Variant	Green. Confirmations, completed actions.
vi-alert--warning	Variant	Yellow. Caution, reversible risks.
vi-alert--error	Variant	Red. Failures, critical issues.
vi-alert--info	Variant	Blue. Informational messages.
vi-alert--neutral	Variant	Grey. Notes, tips, supplemental context.
vi-alert__title	Slot	Optional bold heading inside the alert.
vi-alert__text	Slot	Body copy. Use a <p> tag.
vi-alert__actions	Slot	Button row below the message text.