React Chip Component

Chip

Release candidate (RC)

This component is in the Release Candidate phase and its API is considered stable. Minor adjustments may still occur before the final release.

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

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.

Basic chipBasic chip 2Basic chip 3Basic chip 4

Outline chips#

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

Outline chipOutline chip 2Outline chip 3Outline chip 4

Chips with icons#

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

Chip with icon 1Chip with icon 2

Chips with avatars#

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

Chip with avatar

Chip with avatar 2

Chip with avatar 3

Chip with avatar 4

Variants#

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

Primary chipPrimary chipSecondary chipSecondary chipSuccess chipSuccess chipDanger chipDanger chipWarning chipWarning chipInfo chipInfo chip

Active state#

Add active to make chips use the solid appearance. This is useful for toggle-style chip selections.

DefaultActivePrimaryActiveSuccessActive

Sizes#

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

SmallSmall with icon

Small with avatar

Small with avatar 2Small removable

DefaultDefault with icon 1

Default with avatar

Default with avatar1Default removable

LargeSmall with icon 1

Large with avatar

Large with avatar 2Large removable

Interactive chips#

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

SelectableRemovableSelectedDisabled

Remove button#

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

Chip 1Chip 2Chip 3Chip 4

Keyboard behavior#

Chips support keyboard navigation when they are selectable and/or removable.

When a chip is focused#

Enter / Space: toggle selection when selectable is enabled
Backspace / Delete: close chip when removable is enabled
ArrowLeft: move focus to previous chip
ArrowRight: move focus to next chip
Home: move focus to the first chip in the container
End: move focus to the last chip in the container

Mouse interaction#

Click chip: toggle selection when selectable is enabled
Click remove: close chip when removable is enabled

API#

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

<CChip />