React Badges
With React Badges you can generates two types of badges -
- Notifications Badges - Badges which can be used in different types of icons at their corners to show notification updates
- Regular Badges - Simple Badges which can be used as chips
Basic Notification Badges
Demo examples of badges containing text or number, using any background colors. The badge is applied to its children.
1import React from 'react';
2import { Badge } from 'customizable-react-badges';
3
4const App = () => {
5 return ( <React.Fragment>
6 <Badge content={5} contentColor="#ffffff">
7 <NotificationIcon height={40} width={40} />
8 </Badge>
9 <Badge content={5} bgColor="blue">
10 <NotificationIcon height={40} width={40} />
11 </Badge>
12 <Badge content={5} bgColor="pink">
13 <NotificationIcon height={40} width={40} />
14 </Badge>
15 <Badge content={5} bgColor="aqua">
16 <NotificationIcon height={40} width={40} />
17 </Badge>
18 </React.Fragment>
19 );
20};Maximum Value
You can use the max property on Badge Component to cap the value of the badge content.
1import React from 'react';
2import { Badge } from 'customizable-react-badges';
3
4const App = () => {
5 return (
6 <React.Fragment>
7 <Badge content={99} contentColor="#ffffff">
8 <NotificationIcon height={40} width={40} />
9 </Badge>
10 <Badge content={99} max={75} bgColor="blue">
11 <NotificationIcon height={40} width={40} />
12 </Badge>
13 <Badge content={100} max={99} bgColor="pink">
14 <NotificationIcon height={40} width={40} />
15 </Badge>
16 <Badge content={10000} max={999} bgColor="aqua">
17 <NotificationIcon height={40} width={40} />
18 </Badge>
19 </React.Fragment>
20 );
21};
22
23export default App;
24
Hide/Show Zero
You can control wheather badge should show the content or hide it when it is zero with the help of hideZero property. By default hideZero is false , so that when the value of content is zero it will show the badge.
1import React from 'react';
2import { Badge } from 'customizable-react-badges';
3
4const App = () => {
5 return (
6 <React.Fragment>
7 <Badge content={0} bgColor="pink">
8 <NotificationIcon height={40} width={40} />
9 </Badge>
10 <Badge content={0} hideZero bgColor="aqua">
11 <NotificationIcon height={40} width={40} />
12 </Badge>
13 </React.Fragment>
14 );
15};
16
17export default App;
18
Badge Alignment
You can use the verticalAlignment property to control vertical alignment of the badge and horizontalAlignment property to control horizontal alignment of the badge.
1import React from 'react';
2import { Badge } from 'customizable-react-badges';
3
4const App = () => {
5 return (
6 <React.Fragment>
7 <Badge content={5} verticalAlignment="top" horizontalAlignment="right" bgColor="pink">
8 <NotificationIcon height={40} width={40} />
9 </Badge>
10 <Badge content={5} verticalAlignment="top" horizontalAlignment="left" bgColor="blue">
11 <NotificationIcon height={40} width={40} />
12 </Badge>
13 <Badge content={5} verticalAlignment="bottom" horizontalAlignment="right" bgColor="orange">
14 <NotificationIcon height={40} width={40} />
15 </Badge>
16 <Badge content={5} verticalAlignment="bottom" horizontalAlignment="left" bgColor="green">
17 <NotificationIcon height={40} width={40} />
18 </Badge>
19 </React.Fragment>
20 );
21};
22
23export default App;
24
Regular Badges (like Chip)
To use Badge Component for use other than Notifications you can pass any string to content property of the Badge and don't pass any children to the Badge Component.
1import React from 'react';
2import { Badge } from 'customizable-react-badges';
3
4const App = () => {
5 return (
6 <React.Fragment>
7 <Badge content="Danger" contentColor="#ffffff" />
8 <Badge content="Success" bgColor="green" />
9 <Badge content="Warning" bgColor="orange" />
10 <Badge content="Info" bgColor="skyblue" />
11 <Badge content="Blue" bgColor="blue" />
12 <Badge content="Pink" bgColor="pink" />
13 </React.Fragment>
14 );
15};
16
17export default App;
18