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" />}
      />
    </div>
  );
}

#software-development #technology #javascript #programming #web-development