react-badges

Customizable and Reusable React Badge component for your all kinds of Projects and WebSites.

Install

npm i react-badges

or

yarn add react-badges

Usage

If you wanted to use them as notification badges like

you can use code like below

import React from 'react';
import { Badge } from 'react-badges';
import MailIcon from './MailIcon';

const App = () => {
    return (
            <Badge
                content={4}
                verticalAlignment="top"
                horizontalAlignment="right"
            >
                <MailIcon />
            </Badge>
    );
};

export default App;

OR

If you wanter to use them as regular simple badges like

you can use cod like below

import React from 'react';
import { Badge } from 'react-badges';

const App = () => {
    return (
        <div
            style={{
                height: '100vh',
                display: 'flex',
                justifyContent: 'space-around',
                width: '60vw',
                alignItems: 'center'
            }}
        >
            <Badge content="Danger" contentColor="#ffffff" />
            <Badge content="Success" bgColor="green" />
            <Badge content="Warning" bgColor="orange" />
            <Badge content="Info" bgColor="skyblue" />
        </div>
    );
};

export default App;

Properties

Property	Type	Required	Default value	Description
content	string/number	yes	Content to be shown in the badge.
bgColor	string	no	red	Background Color of the badge.
contentColor	string	no	white	Color of the content of badge.
verticalAlignment	'top'/'bottom'	no	'top'	Vertical Alignment of the badge
horizontalAlignment	'left'/'right'	no	'right'	Horizontal Alignment of the badge.
max	number	no	99	Max count to show.
hideZero	boolean	no	false	Controls whether the badge is hidden when badgeContent is zero.
## License

MIT © satishnaikawadi2011