Chip

Updated: May 13, 2025

Chips are compact elements that represent discrete information, selections, or filters. They help users make selections, filter content, or trigger actions in a space-efficient way.

Chip

Default

With icon

Removable

Unselected

<Chip label="Default" selected />
<Chip label="With icon" prefixIcon="calendar" />
<Chip label="Removable" onRemove={() => {}} />
<Chip label="Unselected" />

State

Chips can be in a selected or unselected state to indicate active filters or selections. You can use the onClick prop to make the chip interactive.

Interactive

Clickable

const [selected, setSelected] = useState<boolean>(true);

<Chip 
  label="Clickable" 
  selected={selected}
  onClick={() => setSelected(!selected)} 
/>

Prefix & Suffix

Enhance chips with prefix icons to improve visual communication.

Prefix & Suffix

Date

Discord

Style

Favorite

<Chip label="Tag" prefixIcon="tag" />
<Chip label="User" prefixIcon="user" />
<Chip label="Location" prefixIcon="mapPin" />
<Chip label="Favorite" prefixIcon="heart" />

Removable

Chips can include a remove button to allow users to dismiss or remove the chip. Click the remove button to see toast notifications.

Removable

React

TypeScript

Next.js

const { addToast } = useToast();
const [chips, setChips] = useState([
  { id: "1", label: "React", icon: "code" },
  { id: "2", label: "TypeScript", icon: "code" },
  { id: "3", label: "Next.js" }
]);

const handleRemove = (id) => {
  const chipToRemove = chips.find(chip => chip.id === id);
  setChips(chips.filter(chip => chip.id !== id));
  
  addToast({
    variant: "danger",
    message: "Removed " + chipToRemove.label + " chip"
  });
};

<Row gap="8" wrap>
  {chips.map(chip => (
    <Chip
      key={chip.id}
      label={chip.label}
      prefixIcon={chip.icon}
      onRemove={() => handleRemove(chip.id)}
    />
  ))}
</Row>

API reference

Prop	Type	Default
labelrequired The text.	string	—
selected Whether it reads as chosen.	boolean	true
prefixIcon Icon before the label.	IconName	—
onRemove Adds a remove control, called when it is used.	() => void	—
onClick Called when the chip body is clicked.	MouseEventHandler<HTMLDivElement>	—
children	React.ReactNode	—
iconButtonProps Passed through to the remove control.	Partial<IconButtonProps>	{}
style	React.CSSProperties	—
className	string	—
…and every FlexProps prop	inherited	—

Form ControlsCheckbox

Form ControlsColorInput

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club