Material UI — Badges and Chips

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to customize badges and add chips with Material UI.

Maximum Value of Badges

We can set the maximum value of badges.

It has the max prop to let us do that.

For example, we can write:

import React from "react";
import Badge from "@material-ui/core/Badge";
import MailIcon from "@material-ui/icons/Mail";

export default function App() {
  return (
    <>
      <Badge badgeContent={1000} max={999} color="secondary">
        <MailIcon />
      </Badge>
    </>
  );
}

We added the Mailicon with a badge with the max prop.

It’s set to 999. So when badgeContent is bigger than that, it’ll display 999+.

Badge Overlap

We can change how badges overlap with icons.

For example, we can write:

import React from "react";
import clsx from "clsx";
import MailIcon from "@material-ui/icons/Mail";
import Badge from "@material-ui/core/Badge";

export default function App() {
  return (
    <div>
      <Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
        <MailIcon />
      </Badge>
    </div>
  );
}

We added the overlap ptop and set that to circle to make it work with circles.

Dot Badge

To make the badge display as a dot, we can use the variant set to dot .

For example, we can write:

import React from "react";
import clsx from "clsx";
import MailIcon from "@material-ui/icons/Mail";
import Badge from "@material-ui/core/Badge";

export default function App() {
  return (
    <div>
      <Badge color="secondary" variant="dot">
        <MailIcon />
      </Badge>
    </div>
  );
}

With the variant set to dot , we can see the dot above the mail icon.

Badge Alignment

To change the alignment of the badge, we can use the anchorOrigin prop to set the badge position.

For example, we can write:

import React from "react";
import clsx from "clsx";
import MailIcon from "@material-ui/icons/Mail";
import Badge from "@material-ui/core/Badge";

export default function App() {
  return (
    <div>
      <Badge
        color="secondary"
        variant="dot"
        anchorOrigin={{
          vertical: "top",
          horizontal: "left"
        }}
      >
        <MailIcon />
      </Badge>
    </div>
  );
}

to place the badge on the top left of the icon.

Chip

Chips are small elements that represent an input, attribute, or action.

We can add them by using the Chip component:

import React from "react";
import Chip from "@material-ui/core/Chip";

export default function App() {
  return (
    <div>
      <Chip label="chip" />
    </div>
  );
}

We add a chip with the Chip component.

The label text is displayed as the content.

Outlined Chips

We can add a chip with an outline with the variant set to outlined .

For example, we can write:

import React from "react";
import Chip from "@material-ui/core/Chip";

export default function App() {
  return (
    <div>
      <Chip label="chip" variant="outlined" />
    </div>
  );
}

Now we see an outline instead of a gray background.

Chip Array

We can make a group of chips by putting them in an array.

For instance, we can write:

import React from "react";
import Chip from "@material-ui/core/Chip";

export default function App() {
  const [chipData] = React.useState([
    { key: 0, label: "james" },
    { key: 1, label: "mary" },
    { key: 2, label: "alex" },
    { key: 3, label: "john" },
    { key: 4, label: "david" }
  ]);

  return (
    <div>
      {chipData.map(c => (
        <Chip label={c.label} key={c.key} />
      ))}
    </div>
  );
}

to put them in an array.

We can let users delete a chip with the onDelete prop:

import React from "react";
import Chip from "@material-ui/core/Chip";

export default function App() {
  const [chipData, setChipData] = React.useState([
    { key: 0, label: "james" },
    { key: 1, label: "mary" },
    { key: 2, label: "alex" },
    { key: 3, label: "john" },
    { key: 4, label: "david" }
  ]);

  const handleDelete = chipToDelete => () => {
    setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
  };

  return (
    <div>
      {chipData.map(c => (
        <Chip label={c.label} key={c.key} onDelete={handleDelete(c)} />
      ))}
    </div>
  );
}

We added the onDelete prop which takes the handleDelete function called with the chips entry we want to delete.

The function returns a function that sets the chip’s data to the new state without the entry we want to delete.

The ‘x’ icon will be shown to let us remove the chip.

Conclusion

We can add chips to display a small piece of data to the user.

They can be deleted.