Badges

Styles

You will find the styles for this component in
src/assets/jss/nextjs-material-kit/components/badgeStyle.js.

Imports

If you want to use our predefined components:

import Badge from 'components/Badge/Badge.js';

If you want to use our styles on something else:

import badgeStyle from "/styles/jss/nextjs-material-kit/components/badgeStyle.js"

Example

Badges can be used as part of links or buttons to provide a counter.

<Button color="primary">Notifications{" "}<Badge>4</Badge></Button>

Contextual variations

<Badge color="primary">primary</Badge>
<Badge color="info">info</Badge>
<Badge color="success">success</Badge>
<Badge color="danger">danger</Badge>
<Badge color="warning">warning</Badge>
<Badge color="rose">rose</Badge>

Props

Badge.defaultProps = {
  color: "gray"
};

Badge.propTypes = {
  classes: PropTypes.object.isRequired,
  color: PropTypes.oneOf([
    "primary",
    "warning",
    "danger",
    "success",
    "info",
    "rose",
    "gray"
  ])
};