Bootstrap 5 Chip

Chip

Bootstrap Chip component for CoreUI — build removable tags, selectable labels, and filterable chips with icons, avatars, and full keyboard support.

Available in Other JavaScript Frameworks

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

On this page

Overview

The CoreUI Bootstrap Chip component lets you build compact, interactive UI elements for labels, tags, filters, and selections. Chips support icons, avatars, dismissal, keyboard navigation, and theming via CSS variables.

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—they don’t 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.
A single chip handles its own selection and removal; group chips in a Chip set for roving focus and arrow-key navigation.

See examples of all of this in action below.

Rendering more than one chip? Reach for the Chip set component. A standalone .chip is the building block for a single, independent chip. The Chip set is the recommended container for any group of chips — it instantiates the chips for you and manages selection, removal, and keyboard navigation (arrow keys, Home/End) across the whole set. The Chip input builds on it for tag-style text entry.

When to use chips

Use the Bootstrap 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 .chip for standalone chips.

Basic chip Basic chip 2 Basic chip 3 Basic chip 4

html

<div class="d-flex flex-wrap gap-1">
  <span class="chip">Basic chip</span>
  <span class="chip">Basic chip 2</span>
  <span class="chip">Basic chip 3</span>
  <span class="chip">Basic chip 4</span>
</div>

Outline chips

Add .chip-outline to remove all background images and colors on any chip.

Outline chip Outline chip 2 Outline chip 3 Outline chip 4

html

<div class="d-flex flex-wrap gap-1">
  <span class="chip chip-outline">Outline chip</span>
  <span class="chip chip-outline">Outline chip 2</span>
  <span class="chip chip-outline">Outline chip 3</span>
  <span class="chip chip-outline">Outline chip 4</span>
</div>

Chips with icons

Add .chip-icon for a leading icon.

Chip with icon 1 Chip with icon 2

html

<div class="d-flex flex-wrap gap-1">
  <span class="chip">
    <span class="chip-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
      </svg>
    </span>
    Chip with icon 1
  </span>
  <span class="chip">
    <span class="chip-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
      </svg>
    </span>
    Chip with icon 2
  </span>
</div>

Chips with avatars

Add .chip-img for an image like an avatar or use our avatar component.

Chip with avatar

Chip with avatar 2 L Chip with avatar 3 L Chip with avatar 4

html

<div class="d-flex flex-wrap gap-1">
  <span class="chip">
    <img src="/assets/img/avatars/1.jpg" class="chip-img" width="16" height="16" alt="">
    Chip with avatar
  </span>
  <span class="chip">
    <img src="/assets/img/avatars/1.jpg" class="chip-img" width="16" height="16" alt="">
    Chip with avatar 2
  </span>
  <span class="chip">
    <span class="avatar bg-primary text-white">L</span>
    Chip with avatar 3
  </span>
  <span class="chip">
    <span class="avatar bg-success text-white">L</span>
    Chip with avatar 4
  </span>
</div>

Variants

Apply .chip-* classes to color your chips. Chips are subtle by default as this allows for a clear, themed active state.

Primary chip Primary chip Secondary chip Secondary chip Success chip Success chip Danger chip Danger chip Warning chip Warning chip Info chip Info chip

html

<div class="d-flex flex-wrap gap-1">
<span class="chip chip-primary chip-clickable" tabindex="0">Primary chip</span>
  <span class="chip chip-primary active" tabindex="0">Primary chip</span>
<span class="chip chip-secondary chip-clickable" tabindex="0">Secondary chip</span>
  <span class="chip chip-secondary active" tabindex="0">Secondary chip</span>
<span class="chip chip-success chip-clickable" tabindex="0">Success chip</span>
  <span class="chip chip-success active" tabindex="0">Success chip</span>
<span class="chip chip-danger chip-clickable" tabindex="0">Danger chip</span>
  <span class="chip chip-danger active" tabindex="0">Danger chip</span>
<span class="chip chip-warning chip-clickable" tabindex="0">Warning chip</span>
  <span class="chip chip-warning active" tabindex="0">Warning chip</span>
<span class="chip chip-info chip-clickable" tabindex="0">Info chip</span>
  <span class="chip chip-info active" tabindex="0">Info chip</span>

  </div>

Primary chip Primary chip Secondary chip Secondary chip Success chip Success chip Danger chip Danger chip Warning chip Warning chip Info chip Info chip

html

<div class="d-flex flex-wrap gap-1">
<span class="chip chip-outline chip-clickable chip-primary" tabindex="0">Primary chip</span>
  <span class="chip chip-outline chip-primary active" tabindex="0">Primary chip</span>
<span class="chip chip-outline chip-clickable chip-secondary" tabindex="0">Secondary chip</span>
  <span class="chip chip-outline chip-secondary active" tabindex="0">Secondary chip</span>
<span class="chip chip-outline chip-clickable chip-success" tabindex="0">Success chip</span>
  <span class="chip chip-outline chip-success active" tabindex="0">Success chip</span>
<span class="chip chip-outline chip-clickable chip-danger" tabindex="0">Danger chip</span>
  <span class="chip chip-outline chip-danger active" tabindex="0">Danger chip</span>
<span class="chip chip-outline chip-clickable chip-warning" tabindex="0">Warning chip</span>
  <span class="chip chip-outline chip-warning active" tabindex="0">Warning chip</span>
<span class="chip chip-outline chip-clickable chip-info" tabindex="0">Info chip</span>
  <span class="chip chip-outline chip-info active" tabindex="0">Info chip</span>

  </div>

Active state

Add .active to make chips use the solid appearance (bg/contrast). This is useful for toggle-style chip selections.

Default Active Primary Active Success Active

html

<div class="d-flex flex-wrap gap-1">
  <span class="chip">Default</span>
  <span class="chip active">Active</span>
  <span class="chip chip-primary">Primary</span>
  <span class="chip chip-primary active">Active</span>
  <span class="chip chip-success">Success</span>
  <span class="chip chip-success active">Active</span>
</div>

Sizes

Use .chip-sm or .chip-lg for different sizes.

Small Small with icon

Small with avatar L Small with avatar 2 Small removable

Default Default with icon 1

Default with avatar L Default with avatar1 Default removable

Large Small with icon 1

Large with avatar L Large with avatar 2 Large removable

html

<div class="d-flex flex-wrap gap-1 mb-3">
  <span class="chip chip-sm">Small</span>
  <span class="chip chip-sm">
    <span class="chip-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
      </svg>
    </span>
    Small with icon
  </span>
  <span class="chip chip-sm">
    <img src="/assets/img/avatars/1.jpg" class="chip-img" width="16" height="16" alt="">
    Small with avatar
  </span>
  <span class="chip chip-sm">
    <span class="avatar bg-primary text-white">L</span>
    Small with avatar 2
  </span>
  <span class="chip chip-sm">
    Small removable
    <button type="button" class="chip-remove" aria-label="Remove">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <line x1="4" y1="4" x2="12" y2="12"/>
        <line x1="12" y1="4" x2="4" y2="12"/>
      </svg>
    </button>
  </span>
</div>

<div class="d-flex flex-wrap gap-1 mb-3">
  <span class="chip">Default</span>
  <span class="chip chip-sm">
    <span class="chip-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
      </svg>
    </span>
    Default with icon 1
  </span>
    <span class="chip">
    <img src="/assets/img/avatars/1.jpg" class="chip-img" width="16" height="16" alt="">
    Default with avatar
  </span>
  <span class="chip">
    <span class="avatar bg-primary text-white">L</span>
    Default with avatar1
  </span>
  <span class="chip">
    Default removable
    <button type="button" class="chip-remove" aria-label="Remove">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <line x1="4" y1="4" x2="12" y2="12"/>
        <line x1="12" y1="4" x2="4" y2="12"/>
      </svg>
    </button>
  </span>
</div>

<div class="d-flex flex-wrap gap-1">
  <span class="chip chip-lg">Large</span>
  <span class="chip chip-lg">
    <span class="chip-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
      </svg>
    </span>
    Small with icon 1
  </span>
  <span class="chip chip-lg">
    <img src="/assets/img/avatars/1.jpg" class="chip-img" width="16" height="16" alt="">
    Large with avatar
  </span>
  <span class="chip chip-lg">
    <span class="avatar bg-primary text-white">L</span>
    Large with avatar 2
  </span>
  <span class="chip chip-lg">
    Large removable
    <button type="button" class="chip-remove" aria-label="Remove">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <line x1="4" y1="4" x2="12" y2="12"/>
        <line x1="12" y1="4" x2="4" y2="12"/>
      </svg>
    </button>
  </span>
</div>

JavaScript plugin

Use the Bootstrap Chip component JavaScript plugin for selection and dismissal. You can initialize chip components via data attributes or JavaScript. To navigate between several chips with the arrow keys, group them in a Chip set.

The options below can be configured per chip, but in practice you’ll usually set them once on a Chip set: the set forwards selectable, removable, disabled, removeIcon, and ariaRemoveLabel to every chip it manages and instantiates them for you, so you don’t have to add data-coreui-chip to each one.

Data attributes

Add data-coreui-chip to enable the plugin and configure behavior with data-coreui-* options.

Selectable Removable Selected Disabled

html

<div class="d-flex flex-wrap gap-1">
  <span class="chip" data-coreui-chip data-coreui-selectable="true">Selectable</span>
  <span class="chip" data-coreui-chip data-coreui-removable="true">Removable</span>
  <span class="chip" data-coreui-chip data-coreui-selectable="true" data-coreui-selected="true">Selected</span>
  <span class="chip disabled" data-coreui-chip>Disabled</span>
</div>

JavaScript

Initialize a chip directly and pass options:

const chip = document.querySelector('#myChip')
coreui.Chip.getOrCreateInstance(chip, {
  selectable: true,
  removable: true
})

Remove button

If removable is enabled, the plugin will add the remove button automatically. You can also provide your own markup:

<span class="chip" data-coreui-chip data-coreui-removable="true">
  Removable chip
  <button type="button" class="chip-remove" aria-label="Remove">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
      <line x1="4" y1="4" x2="12" y2="12"/>
      <line x1="12" y1="4" x2="4" y2="12"/>
    </svg>
  </button>
</span>

Chip 1 Chip 2 Chip 3 Chip 4

html

<div class="d-flex flex-wrap gap-1">
  <span class="chip" data-coreui-removable="true" data-coreui-selectable="true" data-coreui-chip>Chip 1</span>
  <span class="chip" data-coreui-removable="true" data-coreui-selectable="true" data-coreui-chip>Chip 2</span>
  <span class="chip disabled" data-coreui-removable="true" data-coreui-selectable="true" data-coreui-chip>Chip 3</span>
  <span class="chip" data-coreui-removable="true" data-coreui-selectable="true" data-coreui-chip>Chip 4</span>
</div>

The chips above work independently. To get roving focus and arrow-key navigation across the group, wrap them in a Chip set with data-coreui-chip-set, which also instantiates each chip for you.

Options

Options can be passed using data attributes or JavaScript. To do this, append an option name to data-coreui-, such as data-coreui-animation="{value}". Remember to convert the case of the option name from “camelCase” to “kebab-case” when using data attributes. For instance, you should write data-coreui-custom-class="beautifier" rather than data-coreui-customClass="beautifier".

Starting with CoreUI 4.2.6, all components support an experimental reserved data attribute named data-coreui-config, which can contain simple component configurations as a JSON string. If an element has attributes data-coreui-config='{"delay":50, "title":689}' and data-coreui-title="Custom Title", then the final value for title will be Custom Title, as the standard data attributes will take precedence over values specified in data-coreui-config. Moreover, existing data attributes can also hold JSON values like data-coreui-delay='{"show":50, "hide":250}'.

Option	Type	Default	Description
`ariaRemoveLabel`	string	`'Remove'`	Accessible label for the remove button.
`disabled`	boolean	`false`	Disables interactions and focus. You can also apply the `.disabled` class in markup.
`filter`	boolean	`false`	Shows a check icon while the chip is selected (filter chip). Implies `selectable`.
`removable`	boolean	`false`	Adds a remove button (or enables removal if it exists in markup).
`removeIcon`	string	SVG	HTML string used as the remove icon.
`selectable`	boolean	`false`	Enables selection and keyboard selection behavior.
`selected`	boolean	`false`	Sets the initial selected state when `selectable` is enabled.
`selectedIcon`	string	SVG	HTML string used as the check icon when `filter` is enabled.

Methods

Method	Description
`remove`	Removes the chip (fires `remove` and `removed` events).
`deselect`	Deselects a selectable chip.
`dispose`	Destroys a chip instance. (Removes stored data on the DOM element)
`getInstance`	Static method to get the chip instance: `coreui.Chip.getInstance(element)`.
`getOrCreateInstance`	Static method to get or create a chip instance: `coreui.Chip.getOrCreateInstance(element)`.
`select`	Selects a selectable chip.
`toggle`	Toggles selection for a selectable chip.

Events

All CoreUI chip events are fired from the chip element and bubble.

Event type	Description
`remove.coreui.chip`	Fires immediately when `remove` is called. Cancelable.
`removed.coreui.chip`	Fired after the chip has been removed from the DOM.
`select.coreui.chip`	Fires immediately before a chip is selected. Cancelable.
`selected.coreui.chip`	Fired after a chip is selected.
`deselect.coreui.chip`	Fires immediately before a chip is deselected. Cancelable.
`deselected.coreui.chip`	Fired after a chip is deselected.

const myChip = document.getElementById('myChip')
myChip.addEventListener('selected.coreui.chip', event => {
  // handle selection
})

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 Chip set 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 Chip set, the arrow keys, Home, and End move focus between chips, and focus moves to a neighboring chip after one is removed.

Mouse interaction

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

Accessibility

The Bootstrap 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.
aria-selected is kept in sync with .active on selectable chips.
aria-disabled="true" is applied to disabled chips.
Each .chip-remove button includes an accessible label via ariaRemoveLabel.
Use descriptive aria-label attributes on chip containers when the chip component group has a meaningful role (e.g., “Applied filters”).

Customizing

CSS variables

Chips use local CSS variables on .chip for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

scss

--cui-chip-height: #{$chip-height};
--cui-chip-padding-x: #{$chip-padding-x};
--cui-chip-gap: #{$chip-gap};
--cui-chip-font-size: #{$chip-font-size};
--cui-chip-font-weight: #{$chip-font-weight};
--cui-chip-border-radius: #{$chip-border-radius};
--cui-chip-img-size: #{$chip-img-size};
--cui-chip-img-border-radius: #{$chip-img-border-radius};
--cui-chip-icon-size: #{$chip-icon-size};
--cui-chip-remove-size: #{$chip-remove-size};
--cui-chip-remove-opacity: #{$chip-remove-opacity};
--cui-chip-remove-hover-opacity: #{$chip-remove-hover-opacity};
--cui-chip-transition: #{$chip-transition};

--cui-chip-color: var(--cui-text-emphasis, #{$chip-color});
--cui-chip-bg: var(--cui-bg-subtle, #{$chip-bg});
--cui-chip-border-width: #{$chip-border-width};
--cui-chip-border-color: #{$chip-border-color};

--cui-chip-active-color: var(--cui-contrast, #{$chip-active-color});
--cui-chip-active-bg: var(--cui-color, #{$chip-active-bg});
--cui-chip-active-border-color: #{$chip-active-border-color};

--cui-chip-hover-color: var(--cui-contrast, #{$chip-hover-color});
--cui-chip-hover-bg: var(--cui-color, #{$chip-hover-bg});
--cui-chip-hover-border-color: #{$chip-hover-border-color};

SASS variables

scss

$chip-font-size:             .875rem !default;
$chip-font-weight:           $font-weight-normal !default;
$chip-height:                1.75rem !default;
$chip-padding-x:             .625rem !default;
$chip-gap:                   .3125rem !default;
$chip-border-radius:         var(--cui-border-radius-pill) !default;
$chip-icon-size:             1rem !default;
$chip-img-size:              1.25rem !default;
$chip-img-border-radius:     50% !default;
$chip-remove-size:           1rem !default;
$chip-remove-opacity:        .65 !default;
$chip-remove-hover-opacity:  1 !default;
$chip-transition:            background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out !default;

$chip-color:                 var(--cui-body-color) !default;
$chip-bg:                    var(--cui-secondary-bg) !default;
$chip-border-width:          var(--cui-border-width) !default;
$chip-border-color:          transparent !default;

$chip-active-color:          rgba($white, .87) !default;
$chip-active-bg:             var(--cui-primary) !default;
$chip-active-border-color:   transparent !default;

$chip-hover-color:           $chip-color !default;
$chip-hover-bg:              color-mix(in srgb, var(--cui-secondary-bg) 95%, #000) !default;
$chip-hover-border-color:    transparent !default;

$chip-font-size-sm:          .75rem !default;
$chip-height-sm:             1.5rem !default;
$chip-padding-x-sm:          .625rem !default;
$chip-gap-sm:                .25rem !default;
$chip-icon-size-sm:          .875rem !default;
$chip-img-size-sm:           1rem !default;
$chip-remove-size-sm:        .875rem !default;

$chip-font-size-lg:          1rem !default;
$chip-height-lg:             2rem !default;
$chip-padding-x-lg:          .75rem !default;
$chip-gap-lg:                .375rem !default;
$chip-icon-size-lg:          1.25rem !default;
$chip-img-size-lg:           1.5rem !default;
$chip-remove-size-lg:        1.25rem !default;