Badge

The Badge component in this UI library is a versatile element designed to display notifications or status indicators, typically in conjunction with other components. It offers extensive customization options, including various positions, sizes, and style variants, allowing for precise alignment and visual appeal within your application. With support for disabling, rounded corners, and different content types, the Badge component seamlessly adapts to diverse UI requirements, making it a valuable tool for enhancing user interaction and feedback.

Badge Installation

badge.tsx

Basic Badge

1<Badge content="1" position="top-left">
2  <Avatar alt="Jane Doe" rounded="large"/>
3</Badge>
4<Badge noContent={true} >
5  <Avatar alt="Jane Doe" src="/avatarImage.png" rounded="large"/>
6</Badge>

Avatar API Reference

Prop	Type	Default
children*	React.ReactNode	-
position	string	top-right
variant	string	default
size	string	default
rounded	string	full
disabled	boolean	false
* Required

Prop	Types
size	default small large
rounded	full small medium large
variant	default secondary warning success info error custom
position	top-right bottom-right top-left bottom-left

Disabled Badge

1<Badge content="1" position="top-left" disabled>
2  <Avatar alt="Jane Doe" rounded="large"/>
3</Badge>
4<Badge content="25" disabled>
5  <Avatar alt="Jane Doe" src="/avatarImage.png" rounded="large"/>
6</Badge>

Badge - Sizes

Small

Default

Large

1<Badge content="Small" size="small">
2  <Avatar
3    alt="Jane Doe"
4    src="/avatarImage.png"
5    rounded="large"
6  />
7</Badge>
8<Badge content="Default" size="default">
9  <Avatar
10    alt="Jane Doe"
11    src="/avatarImage.png"
12    rounded="large"
13  />
14</Badge>
15<Badge content="Large" size="large">
16  <Avatar
17    alt="Jane Doe"
18    src="/avatarImage.png"
19    rounded="large"
20  />
21</Badge>

Badge - Position

1<Badge content="1" position="top-left">
2  <Avatar
3    alt="Jane Doe"
4    src="/avatarImage.png"
5    rounded="large"
6  />
7</Badge>
8<Badge content="2" position="top-right">
9  <Avatar
10    alt="Jane Doe"
11    src="/avatarImage.png"
12    rounded="large"
13  />
14</Badge>
15<Badge content="3" position="bottom-left">
16  <Avatar
17    alt="Jane Doe"
18    src="/avatarImage.png"
19    rounded="large"
20  />
21</Badge>
22<Badge content="4" position="bottom-right">
23  <Avatar
24    alt="Jane Doe"
25    src="/avatarImage.png"
26    rounded="large"
27  />
28</Badge>

Badge - Style Variants

Secondary Variant

1<Badge content="1" variant="secondary">
2  <Avatar alt="Jane Doe" rounded="large" />
3</Badge>;

Warning Variant

1<Badge content="1" variant="warning">
2  <Avatar alt="Jane Doe" rounded="large" />
3</Badge>;

Success Variant

1<Badge content="1" variant="success">
2  <Avatar alt="Jane Doe" rounded="large" />
3</Badge>;

Info Variant

1<Badge content="1" variant="info">
2  <Avatar alt="Jane Doe" rounded="large" />
3</Badge>;

Error Variant

1<Badge content="1" variant="error">
2  <Avatar alt="Jane Doe" rounded="large" />
3</Badge>;

Get Started

Components