Badge

A versatile badge component with multiple variants, sizes for user interactions.

Preview

PrimarySecondaryWarningOutlineDangerSuccesDark

Usage

Badge.jsx
1import { Badge } from 'reactfine-ui';
2function App() {
3  return ( 
4     <Badge variant='primary'>Primary</Badge>
5  );
6}

Props

PropTypeDefaultDescription
variantstringprimaryBadge style variant
sizestringdefaultBadge size (md, lg)
roundedstringmdBadge rounded (sm, md, lg, full)
classNamestring-Custom CSS classes

Examples

Sizes

MediumLarge

Rounded

SMMDLGFull

Custom Style

Custom Style