Chip
Chips represent input, attributes, or actions.
Simple Example
A chip can be created by using the Chip
component and should normally have a
onClick
event handler.
"use client";
import { Chip } from "@react-md/core/chip/Chip";
import { type ReactElement } from "react";
export default function SimpleChipExample(): ReactElement {
return (
<Chip
onClick={() => {
// do something
}}
>
Chip
</Chip>
);
}
Chip Themes
The chip supports two themes: "solid"
(default) and "outline"
.
import { Chip } from "@react-md/core/chip/Chip";
import { type ReactElement } from "react";
export default function ChipThemesExample(): ReactElement {
return (
<>
<Chip theme="solid">Solid</Chip>
<Chip theme="outline">Outlined</Chip>
</>
);
}
Disabled Chip
A chip can be disabled by enabling the disabled
prop which will update the
styles and prevent click event handlers from working.
import { Chip } from "@react-md/core/chip/Chip";
import { type ReactElement } from "react";
export default function DisabledChipExample(): ReactElement {
return (
<>
<Chip theme="solid" disabled>
Solid
</Chip>
<Chip theme="outline" disabled>
Outlined
</Chip>
</>
);
}
Chip with Addons
The Chip
's children can be any renderable element like icons, avatars, or
text but might require additional styling. Instead of providing icons and
avatars as children, use the leftAddon
and rightAddon
props which will
update the chip styles slightly.
leftAddon
- Decreasepadding-left
from0.75rem
to0.25rem
rightAddon
- Decreasepadding-right
from0.75rem
to0.5rem
import { Avatar } from "@react-md/core/avatar/Avatar";
import { Chip } from "@react-md/core/chip/Chip";
import CancelOutlinedIcon from "@react-md/material-icons/CancelOutlinedIcon";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";
export default function ChipWithAddonsExample(): ReactElement {
return (
<>
<Chip leftAddon={<FavoriteIcon />}>Chip</Chip>
<Chip rightAddon={<FavoriteIcon />}>Chip</Chip>
<Chip
leftAddon={<Avatar src="https://i.pravatar.cc/40?img=3" />}
rightAddon={<CancelOutlinedIcon />}
>
Chip
</Chip>
<Chip
leftAddon={<FavoriteIcon />}
rightAddon={<Avatar src="https://i.pravatar.cc/40?img=3" />}
>
Chip
</Chip>
</>
);
}
Chip with Circular Progress
The Chip
can also render the CircularProgress
component since it updates the progress bar size to be the icon size by default.
This is configurable by the core.$chip-progress-size and
core.$chip-progress-width Sass variables.
"use client";
import { Chip } from "@react-md/core/chip/Chip";
import { CircularProgress } from "@react-md/core/progress/CircularProgress";
import { randomInt } from "@react-md/core/utils/randomInt";
import BrightnessHighIcon from "@react-md/material-icons/BrightnessHighIcon";
import BrightnessLowIcon from "@react-md/material-icons/BrightnessLowIcon";
import { type ReactElement, useEffect, useState } from "react";
export default function ChipWithCircularProgressExample(): ReactElement {
const { enabled, loading, onClick } = useDemoState();
let addon = enabled ? <BrightnessHighIcon /> : <BrightnessLowIcon />;
if (loading) {
addon = <CircularProgress aria-label="Loading" disableCentered />;
}
return (
<>
<Chip leftAddon={addon} onClick={onClick}>
Toggle
</Chip>
<Chip rightAddon={addon} onClick={onClick}>
Toggle
</Chip>
</>
);
}
interface DemoStateHookResult {
enabled: boolean;
loading: boolean;
onClick: () => void;
}
function useDemoState(): DemoStateHookResult {
const [{ enabled, loading }, setState] = useState({
loading: false,
enabled: false,
});
useEffect(() => {
if (!loading) {
return;
}
const timeout = window.setTimeout(
() => {
setState((prevState) => ({
loading: false,
enabled: !prevState.enabled,
}));
},
randomInt({ min: 3, max: 5 }) * 1000,
);
return () => {
window.clearTimeout(timeout);
};
}, [loading]);
const onClick = (): void => {
if (loading) {
return;
}
setState((prevState) => ({ ...prevState, loading: true }));
};
return {
enabled,
loading,
onClick,
};
}
Selectable Chips
The Chip
also supports a selected
state which will render an icon when
selected before the children
by default.
"use client";
import { Chip } from "@react-md/core/chip/Chip";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement } from "react";
export default function SelectableChipExample(): ReactElement {
const { toggled, toggle } = useToggle();
return (
<>
<Chip selected={toggled} onClick={toggle}>
Chip
</Chip>
<Chip selected={toggled} onClick={toggle} theme="outline">
Chip
</Chip>
</>
);
}
Selected Icon After Content
Enable the selectedIconAfter
prop if the selected icon should appear after the
children
instead of before the children.
"use client";
import { Chip } from "@react-md/core/chip/Chip";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement } from "react";
export default function SelectedIconAfterExample(): ReactElement {
const { toggled, toggle } = useToggle();
return (
<>
<Chip selected={toggled} onClick={toggle} selectedIconAfter>
Chip
</Chip>
<Chip
selected={toggled}
onClick={toggle}
selectedIconAfter
theme="outline"
>
Chip
</Chip>
</>
);
}
Custom Selected Icon
The Chip
component will use the
selected icon from the ICON_CONFIG
by
default. The icon can also be changed on a single component by providing the
selectedIcon
prop.
"use client";
import { Chip } from "@react-md/core/chip/Chip";
import { useToggle } from "@react-md/core/useToggle";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";
export default function CustomSelectedIconExample(): ReactElement {
const { toggled, toggle } = useToggle(true);
return (
<Chip selectedIcon={<FavoriteIcon />} selected={toggled} onClick={toggle}>
Chip
</Chip>
);
}
Themed Selected State
The Chip
can also gain a selected background color instead of rendering an
icon while selected by enabling the selectedThemed
prop.
"use client";
import { Chip } from "@react-md/core/chip/Chip";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement } from "react";
export default function ThemedSelectedStateExample(): ReactElement {
const { toggled, toggle } = useToggle();
return (
<>
<Chip selected={toggled} selectedThemed onClick={toggle}>
Chip
</Chip>
<Chip selected={toggled} selectedThemed onClick={toggle} theme="outline">
Chip
</Chip>
</>
);
}
Presentational Chips
If a chip is only used to represent an input or attributes, enable the
noninteractive
prop to render the chip as a span
instead of a button
or use the chip
styling utility function.
It is recommended to use the chip
styling utility function if none of
the chip functionality is required to reduce bundle size.
import { Chip } from "@react-md/core/chip/Chip";
import { chip } from "@react-md/core/chip/styles";
import { type ReactElement } from "react";
export default function PresentationalChipsExample(): ReactElement {
return (
<>
<Chip noninteractive>Tag 1</Chip>
<span className={chip()}>Tag 2</span>
<Chip noninteractive theme="outline">
Tag 3
</Chip>
<span className={chip({ theme: "outline" })}>Tag 4</span>
<Chip noninteractive selected selectedThemed>
Tag 5
</Chip>
<span className={chip({ selected: true, selectedThemed: true })}>
Tag 6
</span>
</>
);
}