# Status Button

> The StatusButton component is a versatile and fully configurable button built with shadcn UI that visually represents real-time status using a small animated dot. It supports multiple statuses such as live, idle, offline, or any custom status, with configurable colors, dot sizes, and pulse animation speed. The component allows developers to attach callbacks for interactive actions, making it suitable for “Go Live,” activity indicators, or dashboard monitoring. Its smooth, pulsing animation enhances user experience, while the flexible API ensures it can adapt to a wide range of applications. The accompanying demo page showcases multiple variations, demonstrating its flexibility in both style and functionality.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/status-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/status-button?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