0 Tk

chip

Import

import Chip from '@mui/material/Chip';
// or
import { Chip } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

Chips represent complex entities in small blocks, such as a contact.

Props of the native component are also available.

Name Type Default Description
avatar element - The Avatar element to display.
children unsupportedProp - This prop isn’t supported. Use the component prop if you need to change the children structure.
classes object - Override or extend the styles applied to the component. See CSS classes API below for more details.
clickable bool - If true, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not appear clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. Note: this controls the UI and does not affect the onClick event.
color ‘default’ | ‘primary’ | ‘secondary’ | ‘error’ | ‘info’ | ‘success’ | ‘warning’ | string ‘default’ The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
component elementType - The component used for the root node. Either a string to use a HTML element or a component.
deleteIcon element - Override the default delete icon element. Shown only if onDelete is set.
disabled bool false If true, the component is disabled.
icon element - Icon element.
label node - The content of the component.
onDelete func - Callback fired when the delete icon is clicked. If set, the delete icon will be shown.
size ‘medium’ | ‘small’ | string ‘medium’ The size of the component.
skipFocusWhenDisabled bool false If true, allows the disabled chip to escape focus. If false, allows the disabled chip to receive focus.
sx Array<func | object | bool> | func | object - The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details.
variant ‘filled’ | ‘outlined’ | string ‘filled’ The variant to use.

The ref is forwarded to the root element.

Theme default props

You can use MuiChip to change the default props of this component with the theme.

CSS Classes

(CSS classes table remains the same)

Customization

You can override the style of the component using one of these customization options:

Source Code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.