Chip – Once UI

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.

Badge, Tag or Chip

Badge announces something, usually as a link: the "New" line above a hero. Tag is a static label for a status, category or piece of metadata. Chip is interactive: a choice that can be selected or removed, in filters and in TagInput. 3.0 plans to consolidate them.

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. suffixIcon puts one after the label, such as a chevron on a chip that opens a menu.

Prefix & Suffix

Date

Discord

Style

Favorite

Sort

<Chip label="Tag" prefixIcon="tag" />
<Chip label="User" prefixIcon="person" />
<Chip label="Location" prefixIcon="globe" />
<Chip label="Favorite" prefixIcon="heart" />
<Chip label="Sort" suffixIcon="chevronDown" selected={false} />

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: string; label: string; icon?: IconName }[]>([
  { 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>

When removing is the chip's only action, interactive={false} makes its label plain text, so it is not a second tab stop that does nothing. TagInput's tags work this way.

Remove only

Berlin

<Chip label="Berlin" interactive={false} onRemove={() => removeCity("Berlin")} />

API reference

	Type	Default
labelrequired The text.	string	—
selected Whether it reads as chosen.	boolean	true
prefixIcon Icon before the label.	IconName	—
suffixIcon Icon after the label.	IconName	—
onRemove Adds a remove control, called when it is used.	() => void	—
interactive With onRemove, whether the label is a control of its own. False makes it plain text.	boolean	true
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	—