SINGULARITY
DOCS
Nextjs
Reference
Avatar
Chip
Chips are small, interactive elements that represent inputs, attributes, or actions.
Chips enable users to input data, select options, filter content, or initiate actions.
Although presented here as a standalone component, Chips are most commonly used within input fields, so some behaviors shown here may not apply in all contexts.
Basic chip
The
Chip component supports both outlined and filled styling options.Chip Filled
Chip Outlined
import * as React from 'react';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
export default function BasicChips() {
return (
<Stack direction="row" spacing={1}>
<Chip label="Chip Filled" />
<Chip label="Chip Outlined" variant="outlined" />
</Stack>
);
}Chip actions
The following actions can be applied to Chips:
- Chips with the
onClickprop defined change appearance on focus, hover, and click. - Chips with the
onDeleteprop defined will display a delete icon which changes appearance on hover.
Clickable
Clickable
Clickable
import * as React from 'react';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
export default function ClickableChips() {
const handleClick = () => {
console.info('You clicked the Chip.');
};
return (
<Stack direction="row" spacing={1}>
<Chip label="Clickable" onClick={handleClick} />
<Chip label="Clickable" variant="outlined" onClick={handleClick} />
</Stack>
);
}Deletable
Deletable
Deletable
import * as React from 'react';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
export default function DeletableChips() {
const handleDelete = () => {
console.info('You clicked the delete icon.');
};
return (
<Stack direction="row" spacing={1}>
<Chip label="Deletable" onDelete={handleDelete} />
<Chip label="Deletable" variant="outlined" onDelete={handleDelete} />
</Stack>
);
}Clickable and deletable
Clickable Deletable
Clickable Deletable
import * as React from 'react';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
export default function ClickableAndDeletableChips() {
const handleClick = () => {
console.info('You clicked the Chip.');
};
const handleDelete = () => {
console.info('You clicked the delete icon.');
};
return (
<Stack direction="row" spacing={1}>
<Chip
label="Clickable Deletable"
onClick={handleClick}
onDelete={handleDelete}
/>
<Chip
label="Clickable Deletable"
variant="outlined"
onClick={handleClick}
onDelete={handleDelete}
/>
</Stack>
);
}Clickable link
import * as React from 'react';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
export default function ClickableLinkChips() {
return (
<Stack direction="row" spacing={1}>
<Chip label="Clickable Link" component="a" href="#basic-chip" clickable />
<Chip
label="Clickable Link"
component="a"
href="#basic-chip"
variant="outlined"
clickable
/>
</Stack>
);
}Custom delete icon
Custom delete icon
Custom delete icon
import * as React from 'react';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import DoneIcon from '@mui/icons-material/Done';
import DeleteIcon from '@mui/icons-material/Delete';
export default function CustomDeleteIconChips() {
const handleClick = () => {
console.info('You clicked the Chip.');
};
const handleDelete = () => {
console.info('You clicked the delete icon.');
};
return (
<Stack direction="row" spacing={1}>
<Chip
label="Custom delete icon"
onClick={handleClick}
onDelete={handleDelete}
deleteIcon={<DoneIcon />}
/>
<Chip
label="Custom delete icon"
onClick={handleClick}
onDelete={handleDelete}
deleteIcon={<DeleteIcon />}
variant="outlined"
/>
</Stack>
);
}Chip adornments
You can add decorative elements to the start of the Chip component.
Use the
avatar prop to include an avatar or the icon prop to add an icon.Avatar chip
M
Avatarimport * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
export default function AvatarChips() {
return (
<Stack direction="row" spacing={1}>
<Chip avatar={<Avatar>M</Avatar>} label="Avatar" />
<Chip
avatar={<Avatar alt="Natacha" src="/material-ui-static/images/avatar/1.jpg" />}
label="Avatar"
variant="outlined"
/>
</Stack>
);
}Icon chip
With Icon
With Icon
import * as React from 'react';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import FaceIcon from '@mui/icons-material/Face';
export default function IconChips() {
return (
<Stack direction="row" spacing={1}>
<Chip icon={<FaceIcon />} label="With Icon" />
<Chip icon={<FaceIcon />} label="With Icon" variant="outlined" />
</Stack>
);
}Color chip
Apply the
color prop to select a color from the theme palette.primary
success
primary
success
import * as React from 'react';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
export default function ColorChips() {
return (
<Stack spacing={1} sx={{ alignItems: 'center' }}>
<Stack direction="row" spacing={1}>
<Chip label="primary" color="primary" />
<Chip label="success" color="success" />
</Stack>
<Stack direction="row" spacing={1}>
<Chip label="primary" color="primary" variant="outlined" />
<Chip label="success" color="success" variant="outlined" />
</Stack>
</Stack>
);
}Sizes chip
Use the
size prop to create a smaller Chip.Small
Small
import * as React from 'react';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
export default function SizesChips() {
return (
<Stack direction="row" spacing={1}>
<Chip label="Small" size="small" />
<Chip label="Small" size="small" variant="outlined" />
</Stack>
);
}Multiline chip
By default, Chips display labels on a single line. To support multiline content, apply the
sx prop to set height:auto on the Chip component and whiteSpace: normal on the label styles.This is a chip that has multiple lines.
import * as React from 'react';
import Chip from '@mui/material/Chip';
import Box from '@mui/material/Box';
export default function MultilineChips() {
return (
<Box sx={{ width: 100 }}>
<Chip
sx={{
height: 'auto',
'& .MuiChip-label': {
display: 'block',
whiteSpace: 'normal',
},
}}
label="This is a chip that has multiple lines."
/>
</Box>
);
}Chip array
This example demonstrates rendering multiple chips from an array of values. Removing a chip deletes it from the array. Without an
onClick prop, the Chip can be focused but does not gain depth when clicked or touched.- Angular
- jQuery
- Polymer
- React
- Vue.js
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Chip from '@mui/material/Chip';
import Paper from '@mui/material/Paper';
import TagFacesIcon from '@mui/icons-material/TagFaces';
interface ChipData {
key: number;
label: string;
}
const ListItem = styled('li')(({ theme }) => ({
margin: theme.spacing(0.5),
}));
export default function ChipsArray() {
const [chipData, setChipData] = React.useState<readonly ChipData[]>([
{ key: 0, label: 'Angular' },
{ key: 1, label: 'jQuery' },
{ key: 2, label: 'Polymer' },
{ key: 3, label: 'React' },
{ key: 4, label: 'Vue.js' },
]);
const handleDelete = (chipToDelete: ChipData) => () => {
setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key));
};
return (
<Paper
sx={{
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
listStyle: 'none',
p: 0.5,
m: 0,
}}
component="ul"
>
{chipData.map((data) => {
let icon;
if (data.label === 'React') {
icon = <TagFacesIcon />;
}
return (
<ListItem key={data.key}>
<Chip
icon={icon}
label={data.label}
onDelete={data.label === 'React' ? undefined : handleDelete(data)}
/>
</ListItem>
);
})}
</Paper>
);
}Chip playground
Accessibility
When a Chip is clickable or deletable, it functions as a button in the tab order. When focused (e.g., via tabbing), releasing
Backspace or Delete (keyup event) triggers the onDelete handler, while releasing Escape blurs the Chip.