Command Menu

Search documentation, components, and switch theme.

Atoms

Badge Status

A status badge with animated ping indicator.

Formance
Docs

Installation#

npx shadcn@latest add @formance/badge-status

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { BadgeStatus } from '@/components/ui/badge-status'
<BadgeStatus variant="valid">Connector Active</BadgeStatus>

Examples#

Variants#

Sizes#