React Chip Component with Bootstrap Styling

Chip with Bootstrap Styling

Bootstrap 5 components designed for React.js

This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.

If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to build Bootstrap-styled React Chip components in CoreUI with the same examples and behaviors as the CoreUI Bootstrap Chip documentation.

On this page

Overview#

The CoreUI React Bootstrap Chip component lets you build compact, interactive UI elements for labels, tags, filters, and selections. Chips support icons, avatars, removal, keyboard navigation, and themed 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 by default.
Chips can include icons, avatars, and remove controls.
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.

When to use chips#

Use this React Chip Component when you need:

Multi-select filters in forms or search interfaces
Removable tags for selected values
Keyboard-navigable selection groups
Compact status tokens with icons or avatars

Basic chips#

Use CChip for standalone Bootstrap-styled 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"> for leading icons.

Chip with icon 1Chip with icon 2

Chips with avatars#

Use .chip-img for image avatars 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.

DefaultActivePrimaryActiveSuccessActive

Sizes#

Use size="sm" and 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#

Focusable chips (selectable or removable) support keyboard navigation and actions:

Enter / Space: toggle selected state
Backspace / Delete: run remove action
ArrowLeft / ArrowRight: move focus to previous or next chip
Home / End: jump focus to first or last chip in the group

API reference#

See below for the full API reference for all available props for the Bootstrap-styled React Chip Component.

<CChip />