Atoms
Badge
Status badges with semantic color variants.
shadcn/uiBased on shadcn/ui with Formance brand styling.
Installation#
npx shadcn@latest add @formance/badgeInstall the following dependencies:
npm install class-variance-authorityCopy 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