# Alert Badge

> The AlertBadge component is a modern, interactive notification badge designed for developers and dashboards. Unlike traditional toasts, it displays a live counter with alert messages in a compact, floating style. It supports multiple types such as success, error, info, and warning, each with corresponding colors and icons. The component is fully reusable and configurable through props, allowing developers to set default counts, labels, and auto-dismiss durations. Users can increment, decrement, or clear the count dynamically, making it perfect for live notifications, message counters, or real-time alerts in web applications. Its clean design and flexible behavior provide both usability and aesthetic appeal, making it a powerful utility for modern interfaces.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/alert-badge

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/alert-badge?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt