Material-UI Badge

Documentation and examples for Material-ui badges, our small count and labelling component.

Examples

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

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Badge from "@material-ui/core/Badge";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/badge.js";
const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const primaryBadgeClasses = {
    badge: classes.badgePositionRelative,
  };
  const errorBadgeClasses = {
    badge:
      classes.badgeCircle +
      " " +
      classes.badgeBorderWhite +
      " " +
      classes.badgeSizeMd,
  };
  return (
    <>
      <Box component={Button} color="default" marginRight="1rem!important">
        Unread messages{" "}
        <Badge
          badgeContent={24}
          color="primary"
          classes={primaryBadgeClasses}
        ></Badge>
      </Box>
      <Badge badgeContent={4} color="error" classes={errorBadgeClasses}>
        <Button color="primary" variant="contained">
          Notifications
        </Button>
      </Badge>
    </>
  );
}

export default Example;

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Default Primary Secondary Info Success Danger Warning 

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Badge from "@material-ui/core/Badge";
import Box from "@material-ui/core/Box";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/badge.js";
const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const badgePositionRelative = {
    badge: classes.badgePositionRelative,
  };
  const badgeInfo = {
    badge: classes.badgePositionRelative + " " + classes.badgeInfo,
  };
  const badgeSuccess = {
    badge: classes.badgePositionRelative + " " + classes.badgeSuccess,
  };
  const badgeWarning = {
    badge: classes.badgePositionRelative + " " + classes.badgeWarning,
  };
  return (
    <>
      <Box marginRight=".25rem" component="span">
        <Badge badgeContent={"default"} classes={badgePositionRelative}></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          color="primary"
          badgeContent={"primary"}
          classes={badgePositionRelative}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          color="secondary"
          badgeContent={"secondary"}
          classes={badgePositionRelative}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge badgeContent={"info"} classes={badgeInfo}></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge badgeContent={"success"} classes={badgeSuccess}></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          color="error"
          badgeContent={"error"}
          classes={badgePositionRelative}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge badgeContent={"warning"} classes={badgeWarning}></Badge>
      </Box>
    </>
  );
}

export default Example;

Pill badges

Use the badgeRound modifier prop class to make badges more rounded (with a larger border-radius and additional horizontal padding).

Default Primary Secondary Info Success Danger Warning 

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Badge from "@material-ui/core/Badge";
import Box from "@material-ui/core/Box";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/badge.js";
const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const badgePositionRelative = {
    badge: classes.badgePositionRelative + " " + classes.badgeRound,
  };
  const badgeInfo = {
    badge:
      classes.badgePositionRelative +
      " " +
      classes.badgeInfo +
      " " +
      classes.badgeRound,
  };
  const badgeSuccess = {
    badge:
      classes.badgePositionRelative +
      " " +
      classes.badgeSuccess +
      " " +
      classes.badgeRound,
  };
  const badgeWarning = {
    badge:
      classes.badgePositionRelative +
      " " +
      classes.badgeWarning +
      " " +
      classes.badgeRound,
  };
  return (
    <>
      <Box marginRight=".25rem" component="span">
        <Badge badgeContent={"default"} classes={badgePositionRelative}></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          color="primary"
          badgeContent={"primary"}
          classes={badgePositionRelative}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          color="secondary"
          badgeContent={"secondary"}
          classes={badgePositionRelative}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge badgeContent={"info"} classes={badgeInfo}></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge badgeContent={"success"} classes={badgeSuccess}></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          color="error"
          badgeContent={"error"}
          classes={badgePositionRelative}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge badgeContent={"warning"} classes={badgeWarning}></Badge>
      </Box>
    </>
  );
}

export default Example;

If you want to render the Badge component as an anchor element, you just need to set a href attribute on them and component="a" prop. You should also add the badgeLink class on the Badge’s root class object (inside the classes prop).

Default Primary Secondary Info Success Danger Warning 

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Badge from "@material-ui/core/Badge";
import Box from "@material-ui/core/Box";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/badge.js";
const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const badgePositionRelative = {
    badge: classes.badgePositionRelative + " " + classes.badgeRound,
  };
  const badgeInfo = {
    root: classes.badgeLink,
    badge:
      classes.badgePositionRelative +
      " " +
      classes.badgeInfo +
      " " +
      classes.badgeRound,
  };
  const badgeSuccess = {
    root: classes.badgeLink,
    badge:
      classes.badgePositionRelative +
      " " +
      classes.badgeSuccess +
      " " +
      classes.badgeRound,
  };
  const badgeWarning = {
    root: classes.badgeLink,
    badge:
      classes.badgePositionRelative +
      " " +
      classes.badgeWarning +
      " " +
      classes.badgeRound,
  };
  return (
    <>
      <Box marginRight=".25rem" component="span">
        <Badge
          href="#mui"
          component="a"
          onClick={(e) => e.preventDefault()}
          badgeContent={"default"}
          classes={badgePositionRelative}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          href="#mui"
          component="a"
          onClick={(e) => e.preventDefault()}
          color="primary"
          badgeContent={"primary"}
          classes={badgePositionRelative}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          href="#mui"
          component="a"
          onClick={(e) => e.preventDefault()}
          color="secondary"
          badgeContent={"secondary"}
          classes={badgePositionRelative}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          href="#mui"
          component="a"
          onClick={(e) => e.preventDefault()}
          badgeContent={"info"}
          classes={badgeInfo}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          href="#mui"
          component="a"
          onClick={(e) => e.preventDefault()}
          badgeContent={"success"}
          classes={badgeSuccess}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          href="#mui"
          component="a"
          onClick={(e) => e.preventDefault()}
          color="error"
          badgeContent={"error"}
          classes={badgePositionRelative}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge
          href="#mui"
          component="a"
          onClick={(e) => e.preventDefault()}
          badgeContent={"warning"}
          classes={badgeWarning}
        ></Badge>
      </Box>
    </>
  );
}

export default Example;

Sizes

Use the badgeSizeMd or badgeSizeLg modifier classes to adjust badge sizes.

Default Medium Large badge 

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Badge from "@material-ui/core/Badge";
import Box from "@material-ui/core/Box";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/badge.js";
const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const badgePositionRelative = {
    badge: classes.badgePositionRelative + " " + classes.badgeRound,
  };
  const badgeSuccess = {
    badge:
      classes.badgePositionRelative +
      " " +
      classes.badgeSuccess +
      " " +
      classes.badgeRound +
      " " +
      classes.badgeSizeMd,
  };
  const badgeWarning = {
    badge:
      classes.badgePositionRelative +
      " " +
      classes.badgeWarning +
      " " +
      classes.badgeRound +
      " " +
      classes.badgeSizeLg,
  };
  return (
    <>
      <Box marginRight=".25rem" component="span">
        <Badge
          color="primary"
          badgeContent={"default"}
          classes={badgePositionRelative}
        ></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge badgeContent={"medium"} classes={badgeSuccess}></Badge>
      </Box>
      <Box marginRight=".25rem" component="span">
        <Badge badgeContent={"large"} classes={badgeWarning}></Badge>
      </Box>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Material-UI Documentation.