React Chip Component

Chip

React Chip component for CoreUI lets you build compact, interactive labels, tags, filters, and selections with icons, avatars, remove buttons, and keyboard support.

Available in Other JavaScript Frameworks

CoreUI React Chip Component is also available for Bootstrap and Vue. Explore framework-specific implementations below:

On this page

Overview

The CoreUI React Chip component lets you build compact, interactive UI elements for labels, tags, filters, and selections. Chips support icons, avatars, removal, keyboard navigation, and theme-aware styling.

Chips are similar to badges, but they have a single size and more defined visual styles useful for indicating state and selection.

Chips are statically sized and do not scale with the parent element by default.
Chips can have icons, avatars, and remove buttons.
Chips can be active or disabled.
Chips automatically gain focus when they are selectable or removable.
Chips support keyboard navigation and selection in their container.

See examples of all of this in action below.

When to use chips

Use the React Chip component when you need:

Multi-select filters in search or form interfaces
Removable tags for selected items or applied filters
Keyboard-navigable selection groups
Compact status indicators with icon or avatar support

Basic chips

Use CChip for standalone chips.

import React from 'react'
import { CChip } from '@coreui/react'

export const ChipExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>Basic chip</CChip>
      <CChip>Basic chip 2</CChip>
      <CChip>Basic chip 3</CChip>
      <CChip>Basic chip 4</CChip>
    </div>
  )
}

import React from 'react'
import { CChip } from '@coreui/react'

export const ChipExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>Basic chip</CChip>
      <CChip>Basic chip 2</CChip>
      <CChip>Basic chip 3</CChip>
      <CChip>Basic chip 4</CChip>
    </div>
  )
}

Outline chips

Use variant="outline" to remove all background images and colors on any chip.

import React from 'react'
import { CChip } from '@coreui/react'

export const ChipOutlineExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip variant="outline">Outline chip</CChip>
      <CChip variant="outline">Outline chip 2</CChip>
      <CChip variant="outline">Outline chip 3</CChip>
      <CChip variant="outline">Outline chip 4</CChip>
    </div>
  )
}

import React from 'react'
import { CChip } from '@coreui/react'

export const ChipOutlineExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip variant="outline">Outline chip</CChip>
      <CChip variant="outline">Outline chip 2</CChip>
      <CChip variant="outline">Outline chip 3</CChip>
      <CChip variant="outline">Outline chip 4</CChip>
    </div>
  )
}

Chips with icons

Wrap CIcon in a <span className="chip-icon"> to render a leading icon.

import React from 'react'
import { CChip } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilInfo, cilUser } from '@coreui/icons'

export const ChipIconExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>
        <span className="chip-icon">
          <CIcon icon={cilUser} />
        </span>
        Chip with icon 1
      </CChip>
      <CChip>
        <span className="chip-icon">
          <CIcon icon={cilInfo} />
        </span>
        Chip with icon 2
      </CChip>
    </div>
  )
}

import React from 'react'
import { CChip } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilInfo, cilUser } from '@coreui/icons'

export const ChipIconExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>
        <span className="chip-icon">
          <CIcon icon={cilUser} />
        </span>
        Chip with icon 1
      </CChip>
      <CChip>
        <span className="chip-icon">
          <CIcon icon={cilInfo} />
        </span>
        Chip with icon 2
      </CChip>
    </div>
  )
}

Chips with avatars

Use .chip-img for an image-like avatar or combine CChip with CAvatar.

import React from 'react'
import { CAvatar, CChip } from '@coreui/react'

export const ChipAvatarExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>
        <img className="chip-img" src={'/assets/img/avatars/1.jpg'} alt="" width="16" height="16" />
        Chip with avatar
      </CChip>
      <CChip>
        <img className="chip-img" src={'/assets/img/avatars/1.jpg'} alt="" width="16" height="16" />
        Chip with avatar 2
      </CChip>
      <CChip>
        <CAvatar theme="primary">L</CAvatar>
        Chip with avatar 3
      </CChip>
      <CChip>
        <CAvatar theme="success">L</CAvatar>
        Chip with avatar 4
      </CChip>
    </div>
  )
}

import React from 'react'
import { CAvatar, CChip } from '@coreui/react'

export const ChipAvatarExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>
        <img className="chip-img" src={'/assets/img/avatars/1.jpg'} alt="" width="16" height="16" />
        Chip with avatar
      </CChip>
      <CChip>
        <img className="chip-img" src={'/assets/img/avatars/1.jpg'} alt="" width="16" height="16" />
        Chip with avatar 2
      </CChip>
      <CChip>
        <CAvatar theme="primary">L</CAvatar>
        Chip with avatar 3
      </CChip>
      <CChip>
        <CAvatar theme="success">L</CAvatar>
        Chip with avatar 4
      </CChip>
    </div>
  )
}

Variants

Apply color variants to your chips. Chips are subtle by default as this allows for a clear themed active state.

import React from 'react'
import { CChip } from '@coreui/react'

const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info']

const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)

export const ChipVariantsExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      {colors.map((color) => (
        <React.Fragment key={color}>
          <CChip theme={color} clickable tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
          <CChip theme={color} selected tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
        </React.Fragment>
      ))}
    </div>
  )
}

import React from 'react'
import { CChip } from '@coreui/react'

const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info']

const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)

export const ChipVariantsExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      {colors.map((color) => (
        <React.Fragment key={color}>
          <CChip theme={color} clickable tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
          <CChip theme={color} selected tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
        </React.Fragment>
      ))}
    </div>
  )
}

import React from 'react'
import { CChip } from '@coreui/react'

const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info']

const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)

export const ChipOutlineVariantsExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      {colors.map((color) => (
        <React.Fragment key={color}>
          <CChip theme={color} variant="outline" clickable tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
          <CChip theme={color} variant="outline" selected tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
        </React.Fragment>
      ))}
    </div>
  )
}

import React from 'react'
import { CChip } from '@coreui/react'

const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info']

const capitalize = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)

export const ChipOutlineVariantsExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      {colors.map((color) => (
        <React.Fragment key={color}>
          <CChip theme={color} variant="outline" clickable tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
          <CChip theme={color} variant="outline" selected tabIndex={0}>
            {capitalize(color)} chip
          </CChip>
        </React.Fragment>
      ))}
    </div>
  )
}

Active state

Add selected to make chips use the solid appearance. On a chip that is not selectable it only switches the look — there is no toggle behavior and no ARIA state.

import React from 'react'
import { CChip } from '@coreui/react'

export const ChipActiveStateExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>Default</CChip>
      <CChip selected>Active</CChip>
      <CChip theme="primary">Primary</CChip>
      <CChip theme="primary" selected>
        Active
      </CChip>
      <CChip theme="success">Success</CChip>
      <CChip theme="success" selected>
        Active
      </CChip>
    </div>
  )
}

import React from 'react'
import { CChip } from '@coreui/react'

export const ChipActiveStateExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip>Default</CChip>
      <CChip selected>Active</CChip>
      <CChip theme="primary">Primary</CChip>
      <CChip theme="primary" selected>
        Active
      </CChip>
      <CChip theme="success">Success</CChip>
      <CChip theme="success" selected>
        Active
      </CChip>
    </div>
  )
}

Sizes

Use size="sm" or size="lg" for different sizes.

import React from 'react'
import { CAvatar, CChip } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilUser } from '@coreui/icons'

export const ChipSizesExample = () => {
  return (
    <>
      <div className="d-flex flex-wrap gap-1 mb-4">
        <CChip size="sm">Small</CChip>
        <CChip size="sm">
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Small with icon
        </CChip>
        <CChip size="sm">
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Small with avatar
        </CChip>
        <CChip size="sm">
          <CAvatar theme="primary">L</CAvatar>
          Small with avatar 2
        </CChip>
        <CChip size="sm" removable>
          Small removable
        </CChip>
      </div>

      <div className="d-flex flex-wrap gap-1 mb-4">
        <CChip>Default</CChip>
        <CChip>
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Default with icon 1
        </CChip>
        <CChip>
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Default with avatar
        </CChip>
        <CChip>
          <CAvatar theme="primary">L</CAvatar>
          Default with avatar1
        </CChip>
        <CChip removable>Default removable</CChip>
      </div>

      <div className="d-flex flex-wrap gap-1">
        <CChip size="lg">Large</CChip>
        <CChip size="lg">
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Small with icon 1
        </CChip>
        <CChip size="lg">
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Large with avatar
        </CChip>
        <CChip size="lg">
          <CAvatar theme="primary">L</CAvatar>
          Large with avatar 2
        </CChip>
        <CChip size="lg" removable>
          Large removable
        </CChip>
      </div>
    </>
  )
}

import React from 'react'
import { CAvatar, CChip } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilUser } from '@coreui/icons'

export const ChipSizesExample = () => {
  return (
    <>
      <div className="d-flex flex-wrap gap-1 mb-4">
        <CChip size="sm">Small</CChip>
        <CChip size="sm">
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Small with icon
        </CChip>
        <CChip size="sm">
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Small with avatar
        </CChip>
        <CChip size="sm">
          <CAvatar theme="primary">L</CAvatar>
          Small with avatar 2
        </CChip>
        <CChip size="sm" removable>
          Small removable
        </CChip>
      </div>

      <div className="d-flex flex-wrap gap-1 mb-4">
        <CChip>Default</CChip>
        <CChip>
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Default with icon 1
        </CChip>
        <CChip>
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Default with avatar
        </CChip>
        <CChip>
          <CAvatar theme="primary">L</CAvatar>
          Default with avatar1
        </CChip>
        <CChip removable>Default removable</CChip>
      </div>

      <div className="d-flex flex-wrap gap-1">
        <CChip size="lg">Large</CChip>
        <CChip size="lg">
          <span className="chip-icon">
            <CIcon icon={cilUser} />
          </span>
          Small with icon 1
        </CChip>
        <CChip size="lg">
          <img
            className="chip-img"
            src={'/assets/img/avatars/1.jpg'}
            alt=""
            width="16"
            height="16"
          />
          Large with avatar
        </CChip>
        <CChip size="lg">
          <CAvatar theme="primary">L</CAvatar>
          Large with avatar 2
        </CChip>
        <CChip size="lg" removable>
          Large removable
        </CChip>
      </div>
    </>
  )
}

Interactive chips

Use selectable, removable, selected, and disabled to match the interactive chip examples from CoreUI.

import React from 'react'
import { CChip } from '@coreui/react'

export const ChipInteractiveExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip selectable>Selectable</CChip>
      <CChip removable>Removable</CChip>
      <CChip selectable defaultSelected>
        Selected
      </CChip>
      <CChip disabled>Disabled</CChip>
    </div>
  )
}

import React from 'react'
import { CChip } from '@coreui/react'

export const ChipInteractiveExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip selectable>Selectable</CChip>
      <CChip removable>Removable</CChip>
      <CChip selectable defaultSelected>
        Selected
      </CChip>
      <CChip disabled>Disabled</CChip>
    </div>
  )
}

To group chips and coordinate their selection — including filter chips with a leading check icon — wrap them in a CChipSet.

Controlled and uncontrolled selection

Added in v6.0.0

A selectable chip works either way, and the prop you reach for is what picks the mode.

	prop	who owns the selection
Uncontrolled	`defaultSelected`	the chip, from that starting point
Controlled	`selected`	your component

onSelectedChange fires in both modes with the requested state, next to onSelect and onDeselect, which carry the event — so you can watch the selection without taking it over.

defaultSelected seeds the uncontrolled chip — it toggles itself from there:

<CChip selectable defaultSelected>Uncontrolled</CChip>

Pass selected and the chip renders exactly what you pass — a click only fires onSelectedChange. Feed the change back, or nothing toggles:

<CChip selectable selected={selected} onSelectedChange={setSelected}>Controlled</CChip>

Remove button

If removable is enabled, the remove button is rendered automatically.

import React from 'react'
import { CChip } from '@coreui/react'

export const ChipDismissButtonExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip removable selectable>
        Chip 1
      </CChip>
      <CChip removable selectable>
        Chip 2
      </CChip>
      <CChip removable selectable disabled>
        Chip 3
      </CChip>
      <CChip removable selectable>
        Chip 4
      </CChip>
    </div>
  )
}

import React from 'react'
import { CChip } from '@coreui/react'

export const ChipDismissButtonExample = () => {
  return (
    <div className="d-flex flex-wrap gap-1">
      <CChip removable selectable>
        Chip 1
      </CChip>
      <CChip removable selectable>
        Chip 2
      </CChip>
      <CChip removable selectable disabled>
        Chip 3
      </CChip>
      <CChip removable selectable>
        Chip 4
      </CChip>
    </div>
  )
}

Keyboard behavior

A standalone chip handles its own selection and removal from the keyboard when it is selectable and/or removable. Roving focus between chips (arrow keys, Home/End) is provided by the parent CChipSet container.

When a chip is focused

Key	Action
`Enter` / `Space`	Toggle selection (only when `selectable` is enabled)
`Backspace` / `Delete`	Close chip when `removable` is enabled

When chips are grouped in a CChipSet, the arrow keys, Home, and End move focus between chips, and removing the focused chip moves focus to a neighboring chip, or to the set once no enabled chip is left.

Mouse interaction

Action	Effect
Click chip	Toggle selection (only when `selectable` is enabled)
Click remove	Close chip (only when `removable` is enabled)

Accessibility

The React Chip component follows WAI-ARIA patterns for interactive widgets, ensuring the chip component is fully usable with keyboards and assistive technologies.

Chips become focusable when selectable or removable is enabled.
A standalone selectable chip is exposed as a toggle button (role="button") with aria-pressed kept in sync with .active. Inside a selectable Chip Set the set exposes a listbox and each chip becomes a role="option" with aria-selected instead.
aria-disabled="true" is applied to disabled chips that carry a role; a role-less chip conveys the state through the disabled class and its removed interactivity.
Each .chip-remove button is named with ariaRemoveLabel and the chip’s text, Remove <text> by default, so every remove button in a set has its own name.
Use descriptive aria-label attributes on chip containers when the chip component group has a meaningful role (e.g., “Applied filters”).

The full treatment is on the accessibility page: semantic structure, ARIA attributes, focus management, visual indicators and keyboard support.

API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

<CChip />