# Status Alert Banner

https://fieldbook.lizardi.mx/components/status-alert-banner

Category: Feedback
![Still of the Status Alert Banner component, a Fieldbook UI component in Feedback.](https://fieldbook.lizardi.mx/thumbs/status-alert-banner.webp)
Preview video: https://ejpqcxcjbiyabxkx.public.blob.vercel-storage.com/previews/status-alert-banner-78a4a5c0e0.mp4 (5 s, silent)

Status Alert Banner: A bordered banner that pairs an icon with a title and optional description to surface a success or error state inline.

## Frameworks

react, vue, svelte, astro, html

## Preview controls

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

| Name | Type | Default | Options or constraints |
| --- | --- | --- | --- |
| variant | select | default | Options: default, destructive |
| title | text | Success! Your changes have been saved | Up to 80 characters |
| description | text | This is an alert with a title and description. | Up to 140 characters |
| accentColor | color | #FF4D8D | No additional limit in the metadata. |

## Usage notes

Status Alert Banner uses the card preview frame with a light/dark theme setting.

### Which frameworks are available for Status Alert Banner?

Status Alert Banner is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

### What does Status Alert Banner depend on?

The React metadata lists these npm dependencies beyond React: class-variance-authority.

### What accessibility details are visible in Status Alert Banner?

The React source for Status Alert Banner includes: attributes and handlers (aria-hidden); explicit roles (alert). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

### How does Status Alert Banner handle reduced motion?

The source scan found no direct useReducedMotion() or matchMedia preference read in Status Alert Banner's index.tsx. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

## Install through MCP

Connect your client, call get_component to retrieve the implementation, then get_install_command for installation instructions. Choose a listed framework, integrate the returned source and verify it in your application.

```json
{
  "tool": "get_component",
  "arguments": {
    "slug": "status-alert-banner",
    "framework": "react"
  }
}
```

[For agents](https://fieldbook.lizardi.mx/docs/agents)
[MCP](https://fieldbook.lizardi.mx/api/mcp)

## Related open components

- [Empty State Panel](https://fieldbook.lizardi.mx/components/blank-slate-card)
- [Click ripple burst](https://fieldbook.lizardi.mx/components/click-ripple-burst)
- [Content Loading Card](https://fieldbook.lizardi.mx/components/content-loading-card)
- [Count badge cluster](https://fieldbook.lizardi.mx/components/count-badge-cluster)
- [Curtain line loader](https://fieldbook.lizardi.mx/components/curtain-line-loader)
- [Empty State Panel](https://fieldbook.lizardi.mx/components/empty-state-panel)