Command Menu

Search documentation, components, and switch theme.

Atoms

Badge

Status badges with semantic color variants.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/badge

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 { Badge } from '@/components/ui/badge'
<Badge variant="primary">Active</Badge>

Examples#

States#

Brand Colors#

Semantic Colors#

Outline#

Outline

Sizes#