Material UI — Chips and Dividers

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 chips and add dividers with Material UI.

Small Chip

We can add the size prop to change the size of the chip.

For example, we can write:

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

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

to make a small basic chip.

Outlined Variant

We can make the chip outlined by setting the variant prop 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 variant="outlined" label="Basic" />
    </div>
  );
}

Avatars

We can add avatars to chips.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <Chip
        label="cat"
        avatar={<Avatar alt="cat" src="[http://placekitten.com/200/200](http://placekitten.com/200/200)" />}
      />
    </div>
  );
}

We set the label to display with the label prop.

avatar has the avatar we want to show on the left.

Icons

We can display an icon besides the chip label.

To do that, we set an icon component as the value of the icon prop.

For example, we can write:

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

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

We set the icon to the FaceIcon to display it to the left of the label.

The delete icon can be changed with the deleteIcon label.

For example, we can write:

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

export default function App() {
  const handleDelete = () => {
    console.info("delete icon clicked");
  };

  return (
    <div>
      <Chip label="task" onDelete={handleDelete} deleteIcon={<DoneIcon />} />
    </div>
  );
}

to add a delete icon of our choice.

We have the onDelete prop to run a function to do something when it’s clicked.

Also, we have the deleteIcon to show the delete icon that we set.

We can also make a chip clickable by passing in an onClick prop.

For example, we can write:

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

export default function App() {
  const handleClick = () => {
    console.info("d clicked");
  };

  return (
    <div>
      <Chip label="task" onClick={handleClick} />
    </div>
  );
}

We add the onClick prop and pass in a function to it to handle clicks.

Divider

Dividers lets us add a thin line to group items.

We can add dividers to lists.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "grape" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => [
          <ListItem button>
            <ListItemText primary={f.name} key={f.key} />
          </ListItem>,
          <Divider />
        ])}
      </List>
    </div>
  );
}

to add a divider below each ListItem .

Inset Dividers

We can add dividers that don’t take up the full width of the container.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import ImageIcon from "@material-ui/icons/Image";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "grape" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => [
          <ListItem>
            <ListItemAvatar>
              <Avatar>
                <ImageIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={f.name} key={f.key} secondary={f.name} />
          </ListItem>,
          <Divider variant="inset" component="li" />
        ])}
      </List>
    </div>
  );
}

to add the list items with an avatar.

To the right of it, we have the list item text.

Then after that, we have the Divider component.

The variant is set to inset to make it display below the text only.

component is set to li to display it as an li element.

Conclusion

We can add chips to display small pieces of text, images, and icons.

Also, we can show dividers to separate items.