ReacUI
🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Badge

A lightweight component for status indicators, counts, and labels

PrimarySecondarySuccessDanger

Installation

The Badge component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Badge component into your React component.

import { Badge } from 'reacui';

Badge Variants

ReacUI badges come in several variants to accommodate different statuses and contexts.

PrimarySecondarySuccessDangerWarningInfo
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>

Badge Sizes

Control the size of badges using the size prop.

SmallMediumLarge
<Badge variant="primary" size="sm">Small</Badge>
<Badge variant="primary" size="md">Medium</Badge>
<Badge variant="primary" size="lg">Large</Badge>

API Reference

The following props are available for the Badge component.

PropTypeDefaultDescription
childrenReactNode-The content of the badge.
variantstring'primary'The badge variant: 'primary', 'secondary', 'success', 'danger', 'warning', or 'info'.
sizestring'md'The badge size: 'sm', 'md', or 'lg'.
classNamestring''Additional CSS classes to add to the badge.