Alert

A component for displaying important messages with different variants (error, warning, success, info).

Installation

npx @zizigy/capsule add Alert

Usage

Basic Alert

<capsule-alert>
  <capsule-alert-title>Alert Title</capsule-alert-title>
  <capsule-alert-description>
    This is an alert description.
  </capsule-alert-description>
</capsule-alert>

With Icon

<capsule-alert>
  <svg
    width="16"
    height="16"
  >
    ...
  </svg>
  <capsule-alert-title>Alert with Icon</capsule-alert-title>
  <capsule-alert-description>Alert message</capsule-alert-description>
</capsule-alert>

Variants

<capsule-alert variant="error">
  <capsule-alert-title>Error</capsule-alert-title>
  <capsule-alert-description>Something went wrong</capsule-alert-description>
</capsule-alert>

Components

The Alert component consists of several sub-components:

capsule-alert

The main container for alert messages.

capsule-alert-title

The title of the alert message.

<capsule-alert-title>Alert Title</capsule-alert-title>

capsule-alert-description

The description of the alert message.

<capsule-alert-description>Alert description</capsule-alert-description>

Attributes

Attribute	Type	Default	Description
variant	string	default	Alert style variant

Variant Values

• default — Default alert style
• error — Error alert with red colors
• warning — Warning alert with yellow/orange colors
• success — Success alert with green colors
• info — Info alert with blue colors

Accessibility

• ✅ ARIA role="alert" set automatically
• ✅ Title has role="heading" with aria-level="2"
• ✅ Semantic structure for screen readers