Badges
The Badge component can be used to show text, labels, and counters inside a small box or circle element which can be placed inside paragraphs, buttons, dropdowns, menu items, and more.
Usage
To get started, import the Badges component and define your tabs data.
Badge.tsx (Copy and Paste this code. )
Component not found
Circle Badges
Component not found
Square Badges
Component not found
Left Border Badges
Component not found
Right Border Badges
Component not found
Bottom Border Badges
Component not found
Top Border Badges
Component not found
Different Color Variants Badges
Component not found
All type of Badges
Component not found
Props
Props that can passed to Badges Component.
| Prop | Type | Default | Description |
|---|---|---|---|
badgeData | IBadge | Required | An object containing the badge's data like label and id. |
border | 'left' | 'right' | 'top' | 'bottom' | undefined | Specifies which side of the badge should have a border. |
borderColor | string | undefined | Sets the color of the border. |
textColor | string | '#2D3748' | Sets the text color of the badge. |
bgColor | string | '#FFFFFF' | Sets the background color of the badge. |
isRounded | boolean | true | If true, the badge will have fully rounded corners. |