Use Chip Actions in Material-UI

In this article, we are going to learn how to use chip actions in Material UI. Chips are small components that stand in for input, an attribute, or an action. With the aid of chips, users can input data, select options, filter content, or start processes. Although it is presented here as a standalone component, the most common application will be some form of input, so some of the behavior is not shown in its proper context.

Chip API

The Chip API is utilized to add a chip to the React MUI. It comes with props

• avatar To display the avatar on the chip we make use of the avatar property.

• classes In order to customize the styles of the component, we can utilize the classes property.

• color If you want to personalize the chip colors, you can do so with the color property.

• component The component attribute renders the root component within the chip.

• clickable By using this property, we can make the chip clickable. Raise it when pressed.

• deleteIcon If you wish to change the icon in a chip component, you can modify it using deleteIcon.

• disabled To disable a chip, simply use disabled.

• icon You have an option to add an icon to your chip by utilizing the icon property.

• label The label attribute is used for adding content to a component.

• onDelete To show the delete icon, we use the onDelete prop.

• size To adjust the size of your chip make use of this size prop.

• skipFocusWhenDisabled To skip focus on a chip utilize prop accordingly.

• sx For adding custom styles for chip component use thesx prop.

• variant If you want different variations of chips available make use of prop.

Steps Required to Customize the Chip

To make a custom chip component in Material UI, see the given steps

Step 1: Create a React Application

Before we proceed with the customization of the chip component in MUI, we need to create a react application. To create a new React app, run the below commands in your terminal

npx create react app chipcompproject

Once the project is created, navigate to its directory by running

cd chipcompproject

Step 2: Add MUI to React

Once you have created the react app, it's time to install the Material UI into the react application. To install MUI, run the following command

npm install @mui/material @emotion/react @emotion/styled

Step 3: Creating a Chip

To add or create a chip, we use the <Chip> API component. Below is the syntax for the same

<Chip label="Click label" />

Step 4: Adding actions to the chip

There are different actions for a chip, like focus, hover, click, delete, etc. We are going to use all of them. The usage for all is shown below

<Chip label="click" onClick={myHandleFunction} />
<Chip label="delete" onDelete={myHandleDelete} />

That's all for the steps to using chip actions. Now let's see some examples.

Example

In this example, we have added the delete action to the chip. Here, when the user clicks the delete icon, the user gets to see the alert for delete.

import React from "react";
import Chip from "@mui/material/Chip";

export default function App() {

   const deleteHandler = () => {
      alert('You just deleted the chip!')
   };

   return (
      <div
         style={{
            padding: 40,
            gap: 30,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <Chip label="delete chip" color="error" variant="filled" onDelete={deleteHandler} />
         <Chip label="delete chip" color="info" variant="outlined" onDelete={deleteHandler} />
         <Chip label="delete chip" color="primary" variant="string" onDelete={deleteHandler} />
         <Chip label="delete chip" color="secondary" variant="filled" onDelete={deleteHandler} />
         <Chip label="delete chip" color="success" variant="outlined" onDelete={deleteHandler} />
         <Chip label="delete chip" color="warning" variant="string" onDelete={deleteHandler} />
      </div>
   );
};

Output

Example

In this example, we have added the click and delete actions to the same chip. Here, when the user clicks the chip, the alert for a click will show, and if the user clicks the delete icon, the user gets to see the alert for delete.

import React from "react";
import { Chip } from "@mui/material"

function App() {
   const deleteHandler = () => {
      alert('You just deleted the chip!')
   };

   const clickHandler = () => {
      alert('You have clicked the chip!')
   };

   return (
      <div
         style={{
            padding: 40,
            gap: 10,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <Chip label="delete chip" color="error" variant="filled" onDelete={deleteHandler} onClick={clickHandler} />
         <Chip label="delete chip" color="info" variant="outlined" onDelete={deleteHandler} onClick={clickHandler} />
         <Chip label="delete chip" color="primary" variant="string" onDelete={deleteHandler} onClick={clickHandler} />
         <Chip label="delete chip" color="secondary" variant="filled" onDelete={deleteHandler} onClick={clickHandler} />
         <Chip label="delete chip" color="success" variant="outlined" onDelete={deleteHandler} onClick={clickHandler} />
         <Chip label="delete chip" color="warning" variant="string" onDelete={deleteHandler} onClick={clickHandler} />
      </div>
   );
};

export default App;

Output

Example

In this example, we have added the link action to the chip. Here, different variants of the chip are used, and we have added a custom clickable link using the "href" prop.

import React from "react";
import { Chip } from "@mui/material";

const App = () => {

   return (
      <div
         style={{
            padding: 40,
            gap: 10,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <Chip label="tutorialspoint" clickable component="a" color="warning" variant="filled" href="https://www.tutorialspoint.com" />
         <Chip label="tutorialspoint" clickable component="a" color="info" variant="outlined" href="https://www.tutorialspoint.com" />
         <Chip label="tutorialspoint" clickable component="a" color="primary" variant="string" href="https://www.tutorialspoint.com" />
      </div>
   );
};
export default App;

Output

Example

In this example, we have added the action for the delete icon. Here, the custom delete icons have been added with different icons and colors. The different variants of the chip have also been used in this example.

import React from "react";
import Chip from "@mui/material/Chip";
import { Backspace, Clear, Delete, DeleteForever, Done, RemoveCircle } from "@mui/icons-material";

export default function App() {
   const deleteHandler = () => {
      alert('You just deleted the chip!')
   };

   return (
      <div
         style={{
            padding: 40,
            gap: 10,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <Chip label="delete chip" deleteIcon={<Delete />} color="error" variant="filled" onDelete={deleteHandler} />
         <Chip label="delete chip" deleteIcon={<Backspace />} color="success" variant="outlined" onDelete={deleteHandler} />
         <Chip label="delete chip" deleteIcon={<Clear />} color="primary" variant="string" onDelete={deleteHandler}  />
         <Chip label="delete chip" deleteIcon={<Done />} color="info" variant="outlined" onDelete={deleteHandler}  />
         <Chip label="delete chip" deleteIcon={<RemoveCircle />} color="secondary" variant="filled" onDelete={deleteHandler} />
         <Chip label="delete chip" deleteIcon={<DeleteForever />} color="warning" variant="string" onDelete={deleteHandler} />
      </div>
   );
};

Output

Conclusion

In this article, we have seen how we can use the chip actions in React using MUI. We have seen the chip API and its related props in this article, and along with this, we have also seen different examples.