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.

Bootstrap 5 Chip

Chip

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

🤖 Looking for the LLM-optimized version? View llm.md

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.
Chips support keyboard navigation and selection in their container.

See examples of all of this in action below.

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>

Chip component JavaScript plugin

Use the Bootstrap Chip component JavaScript plugin for selection, keyboard navigation, and dismissal. You can initialize chip components via data attributes or JavaScript.

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>

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.0, 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.
`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.

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

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

When a chip is focused

Key	Action
`Enter` / `Space`	Toggle selection (only when `selectable` is enabled)
`Backspace` / `Delete`	Close chip when `removable` is enabled
`←`	Move focus to previous chip
`→`	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

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/_chip.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.scss

$chip-font-size:             .875rem;
$chip-font-weight:           $font-weight-normal;
$chip-height:                1.75rem;
$chip-padding-x:             .625rem;
$chip-gap:                   .3125rem;
$chip-border-radius:         var(--#{$prefix}border-radius-pill);
$chip-icon-size:             1rem;
$chip-img-size:              1.25rem;
$chip-img-border-radius:     50%;
$chip-remove-size:           1rem;
$chip-remove-opacity:        .65;
$chip-remove-hover-opacity:  1;
$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;

$chip-color:                 var(--#{$prefix}body-color);
$chip-bg:                    var(--#{$prefix}secondary-bg);
$chip-border-width:          var(--#{$prefix}border-width);
$chip-border-color:          transparent;

$chip-active-color:          rgba($white, .87);
$chip-active-bg:             var(--#{$prefix}primary);
$chip-active-border-color:   transparent;

$chip-hover-color:           $chip-color;
$chip-hover-bg:              color-mix(in srgb, var(--#{$prefix}secondary-bg) 95%, #000);
$chip-hover-border-color:    transparent;

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

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

CoreUI vs Bootstrap

While this Chip component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.

What sets CoreUI apart from Bootstrap?

✅ Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
🧠 Framework-native versions – CoreUI provides dedicated libraries for React.js, Vue.js, and Angular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
👨‍💻 Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
📦 More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
🛠️ Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
🌍 Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
🔒 LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.

Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.

👉 Explore CoreUI Bootstrap Components
👉 Compare CoreUI vs Bootstrap