Skip to content

[chip] Add ChipButton, ChipLink and ChipDelete #48015

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mj12albert wants to merge 5 commits into
base: master
Choose a base branch
from
Open

[chip] Add ChipButton, ChipLink and ChipDelete #48015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a046291
Add ChipButton ChipLink ChipDelete
mj12albert Feb 26, 2026
2a4c71b
Add delete shortcut keys
mj12albert Mar 26, 2026
2cd14bd
Update docs and demos
mj12albert Mar 25, 2026
6c399e5
Fixes
mj12albert Mar 26, 2026
f4d6c3e
fix disableRipple and update types
mj12albert Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 0 additions & 16 deletions docs/data/material/components/chips/AvatarChips.js
View file
Open in desktop

This file was deleted.

16 changes: 0 additions & 16 deletions docs/data/material/components/chips/AvatarChips.tsx
View file
Open in desktop

This file was deleted.

6 changes: 0 additions & 6 deletions docs/data/material/components/chips/AvatarChips.tsx.preview
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions docs/data/material/components/chips/BasicChips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ 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" />
<Chip label="Filled" />
<Chip label="Outlined" variant="outlined" />
</Stack>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/chips/BasicChips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ 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" />
<Chip label="Filled" />
<Chip label="Outlined" variant="outlined" />
</Stack>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/chips/BasicChips.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
<Chip label="Chip Filled" />
<Chip label="Chip Outlined" variant="outlined" />
<Chip label="Filled" />
<Chip label="Outlined" variant="outlined" />
24 changes: 24 additions & 0 deletions docs/data/material/components/chips/ChipAdornments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Avatar from '@mui/material/Avatar';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import ScheduleIcon from '@mui/icons-material/Schedule';
import DoneIcon from '@mui/icons-material/Done';

export default function ChipAdornments() {
return (
<Stack direction="row" spacing={1}>
<Chip
label="Maya Johnson"
color="primary"
startAdornment={<Avatar>M</Avatar>}
/>
<Chip
label="In progress"
variant="outlined"
color="secondary"
startAdornment={<ScheduleIcon />}
/>
<Chip label="Completed" color="success" endAdornment={<DoneIcon />} />
</Stack>
);
}
24 changes: 24 additions & 0 deletions docs/data/material/components/chips/ChipAdornments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Avatar from '@mui/material/Avatar';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import ScheduleIcon from '@mui/icons-material/Schedule';
import DoneIcon from '@mui/icons-material/Done';

export default function ChipAdornments() {
return (
<Stack direction="row" spacing={1}>
<Chip
label="Maya Johnson"
color="primary"
startAdornment={<Avatar>M</Avatar>}
/>
<Chip
label="In progress"
variant="outlined"
color="secondary"
startAdornment={<ScheduleIcon />}
/>
<Chip label="Completed" color="success" endAdornment={<DoneIcon />} />
</Stack>
);
}
12 changes: 12 additions & 0 deletions docs/data/material/components/chips/ChipAdornments.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<Chip
label="Maya Johnson"
color="primary"
startAdornment={<Avatar>M</Avatar>}
/>
<Chip
label="In progress"
variant="outlined"
color="secondary"
startAdornment={<ScheduleIcon />}
/>
<Chip label="Completed" color="success" endAdornment={<DoneIcon />} />
24 changes: 24 additions & 0 deletions docs/data/material/components/chips/ChipButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Chip from '@mui/material/Chip';
import ChipButton from '@mui/material/ChipButton';
import Stack from '@mui/material/Stack';
import PersonAddIcon from '@mui/icons-material/PersonAdd';
import LoopIcon from '@mui/icons-material/Loop';

export default function ChipButtons() {
return (
<Stack direction="row" spacing={1}>
<Chip
label="Assign"
startAdornment={<PersonAddIcon />}
action={<ChipButton onClick={() => {}} />}
/>
<Chip
label="Reset"
variant="outlined"
color="primary"
endAdornment={<LoopIcon />}
action={<ChipButton onClick={() => {}} />}
/>
</Stack>
);
}
24 changes: 24 additions & 0 deletions docs/data/material/components/chips/ChipButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Chip from '@mui/material/Chip';
import ChipButton from '@mui/material/ChipButton';
import Stack from '@mui/material/Stack';
import PersonAddIcon from '@mui/icons-material/PersonAdd';
import LoopIcon from '@mui/icons-material/Loop';

export default function ChipButtons() {
return (
<Stack direction="row" spacing={1}>
<Chip
label="Assign"
startAdornment={<PersonAddIcon />}
action={<ChipButton onClick={() => {}} />}
/>
<Chip
label="Reset"
variant="outlined"
color="primary"
endAdornment={<LoopIcon />}
action={<ChipButton onClick={() => {}} />}
/>
</Stack>
);
}
12 changes: 12 additions & 0 deletions docs/data/material/components/chips/ChipButtons.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<Chip
label="Assign"
startAdornment={<PersonAddIcon />}
action={<ChipButton onClick={() => {}} />}
/>
<Chip
label="Reset"
variant="outlined"
color="primary"
endAdornment={<LoopIcon />}
action={<ChipButton onClick={() => {}} />}
/>
10 changes: 5 additions & 5 deletions ...a/material/components/chips/ColorChips.js → ...a/material/components/chips/ChipColors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';

export default function ColorChips() {
export default function ChipColors() {
return (
<Stack spacing={1} sx={{ alignItems: 'center' }}>
<Stack direction="row" spacing={1}>
<Chip label="primary" color="primary" />
<Chip label="success" color="success" />
<Chip label="Success" color="success" />
<Chip label="Warning" color="warning" />
</Stack>
<Stack direction="row" spacing={1}>
<Chip label="primary" color="primary" variant="outlined" />
<Chip label="success" color="success" variant="outlined" />
<Chip label="Primary" color="primary" variant="outlined" />
<Chip label="Secondary" color="secondary" variant="outlined" />
</Stack>
</Stack>
);
Expand Down
10 changes: 5 additions & 5 deletions .../material/components/chips/ColorChips.tsx → .../material/components/chips/ChipColors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';

export default function ColorChips() {
export default function ChipColors() {
return (
<Stack spacing={1} sx={{ alignItems: 'center' }}>
<Stack direction="row" spacing={1}>
<Chip label="primary" color="primary" />
<Chip label="success" color="success" />
<Chip label="Success" color="success" />
<Chip label="Warning" color="warning" />
</Stack>
<Stack direction="row" spacing={1}>
<Chip label="primary" color="primary" variant="outlined" />
<Chip label="success" color="success" variant="outlined" />
<Chip label="Primary" color="primary" variant="outlined" />
<Chip label="Secondary" color="secondary" variant="outlined" />
</Stack>
</Stack>
);
Expand Down
8 changes: 8 additions & 0 deletions docs/data/material/components/chips/ChipColors.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<Stack direction="row" spacing={1}>
<Chip label="Success" color="success" />
<Chip label="Warning" color="warning" />
</Stack>
<Stack direction="row" spacing={1}>
<Chip label="Primary" color="primary" variant="outlined" />
<Chip label="Secondary" color="secondary" variant="outlined" />
</Stack>
22 changes: 22 additions & 0 deletions docs/data/material/components/chips/ChipLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import Avatar from '@mui/material/Avatar';
import Chip from '@mui/material/Chip';
import ChipLink from '@mui/material/ChipLink';
import Stack from '@mui/material/Stack';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';

export default function ChipLinks() {
return (
<Stack direction="row" spacing={1}>
<Chip
label="Alex Chen"
startAdornment={<Avatar alt="Alex Chen">A</Avatar>}
action={<ChipLink href="#" />}
/>
<Chip
label="Documentation"
endAdornment={<OpenInNewIcon />}
action={<ChipLink href="#" />}
/>
</Stack>
);
}
22 changes: 22 additions & 0 deletions docs/data/material/components/chips/ChipLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import Avatar from '@mui/material/Avatar';
import Chip from '@mui/material/Chip';
import ChipLink from '@mui/material/ChipLink';
import Stack from '@mui/material/Stack';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';

export default function ChipLinks() {
return (
<Stack direction="row" spacing={1}>
<Chip
label="Alex Chen"
startAdornment={<Avatar alt="Alex Chen">A</Avatar>}
action={<ChipLink href="#" />}
/>
<Chip
label="Documentation"
endAdornment={<OpenInNewIcon />}
action={<ChipLink href="#" />}
/>
</Stack>
);
}
10 changes: 10 additions & 0 deletions docs/data/material/components/chips/ChipLinks.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<Chip
label="Alex Chen"
startAdornment={<Avatar alt="Alex Chen">A</Avatar>}
action={<ChipLink href="#" />}
/>
<Chip
label="Documentation"
endAdornment={<OpenInNewIcon />}
action={<ChipLink href="#" />}
/>
2 changes: 1 addition & 1 deletion ...a/material/components/chips/SizesChips.js → ...ta/material/components/chips/ChipSizes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';

export default function SizesChips() {
export default function ChipSizes() {
return (
<Stack direction="row" spacing={1}>
<Chip label="Small" size="small" />
Expand Down
2 changes: 1 addition & 1 deletion .../material/components/chips/SizesChips.tsx → ...a/material/components/chips/ChipSizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';

export default function SizesChips() {
export default function ChipSizes() {
return (
<Stack direction="row" spacing={1}>
<Chip label="Small" size="small" />
Expand Down
0 ...l/components/chips/SizesChips.tsx.preview → ...al/components/chips/ChipSizes.tsx.preview
View file
Open in desktop
File renamed without changes.
55 changes: 0 additions & 55 deletions docs/data/material/components/chips/ChipsArray.js
View file
Open in desktop

This file was deleted.

Loading
Loading