> ## Documentation Index
> Fetch the complete documentation index at: https://docs.equa.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# EquaAlert

> Design system reference for EquaAlert, including Storybook, Figma, screenshots, and usage guidance

# EquaAlert

> **Last Verified:** 2026-05-20 | **Storybook source:** `equa-patternlib-nextjs/stories/EquaAlert.stories.tsx`, Line: 7

## Purpose

Inline status, error, warning, success, and notification messaging.

## Storybook

| Story              | Reference                                                                      |
| ------------------ | ------------------------------------------------------------------------------ |
| Default            | [Storybook](http://localhost:6006/?path=/story/equa-alert--default)            |
| Success            | [Storybook](http://localhost:6006/?path=/story/equa-alert--success)            |
| Warning            | [Storybook](http://localhost:6006/?path=/story/equa-alert--warning)            |
| Error              | [Storybook](http://localhost:6006/?path=/story/equa-alert--error)              |
| Info               | [Storybook](http://localhost:6006/?path=/story/equa-alert--info)               |
| Dismissible        | [Storybook](http://localhost:6006/?path=/story/equa-alert--dismissible)        |
| Without Icon       | [Storybook](http://localhost:6006/?path=/story/equa-alert--without-icon)       |
| Without Title      | [Storybook](http://localhost:6006/?path=/story/equa-alert--without-title)      |
| All Variants       | [Storybook](http://localhost:6006/?path=/story/equa-alert--all-variants)       |
| Toasts             | [Storybook](http://localhost:6006/?path=/story/equa-alert--toasts)             |
| Interactive Toasts | [Storybook](http://localhost:6006/?path=/story/equa-alert--interactive-toasts) |
| Long Content       | [Storybook](http://localhost:6006/?path=/story/equa-alert--long-content)       |

## API And Props

| Prop or Control | Source            | Notes                                |
| --------------- | ----------------- | ------------------------------------ |
| `variant`       | Storybook control | See source story for accepted values |

Sources:

* `equa-patternlib-nextjs/src/components/alert/alert.tsx`, Line: 7
* `equa-patternlib-nextjs/src/components/alert/index.ts`
* `equa-patternlib-nextjs/stories/EquaAlert.stories.tsx`, Line: 7

## Figma

UNVERIFIED -- requires Figma node assignment

## Screenshots

| State           | Asset                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Equa dark theme | <img src="https://mintcdn.com/equainc/WF4vvyO1PBrsp7n_/images/design-system/components/equa-alert/equa-alert--all-variants-equa.png?fit=max&auto=format&n=WF4vvyO1PBrsp7n_&q=85&s=b53da68bef7d1f5a3f0a8e23d48e5a3f" alt="EquaAlert dark theme" width="1366" height="900" data-path="images/design-system/components/equa-alert/equa-alert--all-variants-equa.png" />          |
| Light theme     | <img src="https://mintcdn.com/equainc/WF4vvyO1PBrsp7n_/images/design-system/components/equa-alert/equa-alert--all-variants-light.png?fit=max&auto=format&n=WF4vvyO1PBrsp7n_&q=85&s=28579493601b0e9c408f8328e5688276" alt="EquaAlert light theme" width="1366" height="900" data-path="images/design-system/components/equa-alert/equa-alert--all-variants-light.png" /> |

## Usage Notes

* Prefer this component over local one-off UI for matching product states.
* Keep new variants represented in Storybook before adding docs references here.
* Use token-backed colors, spacing, radius, and shadows from [Foundations](/architecture/design-system/foundations).

## Accessibility Notes

* Preserve keyboard and focus behavior from the source component.
* Any icon-only controls must provide an accessible label in consuming product code.
* Validate color contrast in both Equa dark and light theme screenshots before release.