Angular Chip Component

Chip

Angular 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 Angular Chip Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Added in v5.7.36

Overview

The CoreUI Angular 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 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.
A standalone chip joins the tab order when it is selectable or removable; inside a chip set the set keeps one tab stop.
Chips support keyboard navigation and selection in their container.

See examples of all of this in action below.

When to use chips

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

import { Component } from '@angular/core';
import { ChipComponent } from '@coreui/angular';

@Component({
  selector: 'docs-chip-basic',
  templateUrl: './chip-basic.component.html',
  imports: [ChipComponent]
})
export class ChipBasicComponent {}

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

Outline chips

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

import { Component } from '@angular/core';
import { ChipComponent } from '@coreui/angular';

@Component({
  selector: 'docs-chip-outline',
  templateUrl: './chip-outline.component.html',
  imports: [ChipComponent]
})
export class ChipOutlineComponent {}

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

Chips with icons

Wrap an icon in a <span class="chip-icon"> to render a leading icon.

import { Component } from '@angular/core';
import { ChipComponent } from '@coreui/angular';
import { cilInfo, cilUser } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';

@Component({
  selector: 'docs-chip-icons',
  templateUrl: './chip-icons.component.html',
  imports: [ChipComponent, IconDirective]
})
export class ChipIconsComponent {
  readonly icons = { cilInfo, cilUser };
}

<div class="d-flex flex-wrap gap-1">
  <c-chip>
    <span class="chip-icon"><svg [cIcon]="icons.cilUser"></svg></span>
    Chip with icon 1
  </c-chip>
  <c-chip>
    <span class="chip-icon"><svg [cIcon]="icons.cilInfo"></svg></span>
    Chip with icon 2
  </c-chip>
</div>

Chips with avatars

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

import { Component } from '@angular/core';
import { AvatarComponent, ChipComponent } from '@coreui/angular';

@Component({
  selector: 'docs-chip-avatars',
  templateUrl: './chip-avatars.component.html',
  imports: [AvatarComponent, ChipComponent]
})
export class ChipAvatarsComponent {}

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

Variants

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

import { Component } from '@angular/core';
import { TitleCasePipe } from '@angular/common';
import { ChipComponent } from '@coreui/angular';

@Component({
  selector: 'docs-chip-variants',
  templateUrl: './chip-variants.component.html',
  imports: [ChipComponent, TitleCasePipe]
})
export class ChipVariantsComponent {
  readonly colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'] as const;
}

<div class="d-flex flex-wrap gap-1">
  @for (color of colors; track color) {
    <c-chip [color]="color" clickable tabindex="0">{{ color | titlecase }} chip</c-chip>
    <c-chip [color]="color" active tabindex="0">{{ color | titlecase }} chip</c-chip>
  }
</div>

import { Component } from '@angular/core';
import { TitleCasePipe } from '@angular/common';
import { ChipComponent } from '@coreui/angular';

@Component({
  selector: 'docs-chip-outline-variants',
  templateUrl: './chip-outline-variants.component.html',
  imports: [ChipComponent, TitleCasePipe]
})
export class ChipOutlineVariantsComponent {
  readonly colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'] as const;
}

<div class="d-flex flex-wrap gap-1">
  @for (color of colors; track color) {
    <c-chip [color]="color" variant="outline" clickable tabindex="0">{{ color | titlecase }} chip</c-chip>
    <c-chip [color]="color" variant="outline" active tabindex="0">{{ color | titlecase }} chip</c-chip>
  }
</div>

Active state

Add active to give a chip that is not selectable the solid appearance. For chips the user toggles, use selectable (see Interactive chips).

import { Component } from '@angular/core';
import { ChipComponent } from '@coreui/angular';

@Component({
  selector: 'docs-chip-active-state',
  templateUrl: './chip-active-state.component.html',
  imports: [ChipComponent]
})
export class ChipActiveStateComponent {}

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

Sizes

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

import { Component } from '@angular/core';
import { AvatarComponent, ChipComponent } from '@coreui/angular';
import { cilUser } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';

@Component({
  selector: 'docs-chip-sizes',
  templateUrl: './chip-sizes.component.html',
  imports: [AvatarComponent, ChipComponent, IconDirective]
})
export class ChipSizesComponent {
  readonly icons = { cilUser };
}

<div class="d-flex flex-wrap gap-1 mb-3">
  <c-chip size="sm">Small</c-chip>
  <c-chip size="sm">
    <span class="chip-icon"><svg [cIcon]="icons.cilUser"></svg></span>
    Small with icon
  </c-chip>
  <c-chip size="sm">
    <img class="chip-img" src="/assets/images/avatars/1.jpg" alt="" width="16" height="16" />
    Small with avatar
  </c-chip>
  <c-chip size="sm">
    <c-avatar color="primary" textColor="white">L</c-avatar>
    Small with avatar 2
  </c-chip>
  <c-chip size="sm" removable>Small removable</c-chip>
</div>
<div class="d-flex flex-wrap gap-1 mb-3">
  <c-chip>Default</c-chip>
  <c-chip>
    <span class="chip-icon"><svg [cIcon]="icons.cilUser"></svg></span>
    Default with icon
  </c-chip>
  <c-chip>
    <img class="chip-img" src="/assets/images/avatars/1.jpg" alt="" width="16" height="16" />
    Default with avatar
  </c-chip>
  <c-chip>
    <c-avatar color="primary" textColor="white">L</c-avatar>
    Default with avatar 2
  </c-chip>
  <c-chip removable>Default removable</c-chip>
</div>
<div class="d-flex flex-wrap gap-1">
  <c-chip size="lg">Large</c-chip>
  <c-chip size="lg">
    <span class="chip-icon"><svg [cIcon]="icons.cilUser"></svg></span>
    Large with icon
  </c-chip>
  <c-chip size="lg">
    <img class="chip-img" src="/assets/images/avatars/1.jpg" alt="" width="16" height="16" />
    Large with avatar
  </c-chip>
  <c-chip size="lg">
    <c-avatar color="primary" textColor="white">L</c-avatar>
    Large with avatar 2
  </c-chip>
  <c-chip size="lg" removable>Large removable</c-chip>
</div>

Interactive chips

Use selectable, removable, selected, and disabled to make chips interactive. Bind [(selected)] to keep the selection in your component.

import { Component, signal } from '@angular/core';
import { ChipComponent } from '@coreui/angular';

@Component({
  selector: 'docs-chip-interactive',
  templateUrl: './chip-interactive.component.html',
  imports: [ChipComponent]
})
export class ChipInteractiveComponent {
  readonly selected = signal(true);
}

<div class="d-flex flex-wrap gap-1">
  <c-chip selectable>Selectable</c-chip>
  <c-chip removable>Removable</c-chip>
  <c-chip selectable [(selected)]="selected">Selected</c-chip>
  <c-chip disabled>Disabled</c-chip>
</div>
<p class="small text-body-secondary mt-2 mb-0">Selected: {{ selected() }}</p>

To group chips and coordinate their selection — including filter chips with a leading check icon — wrap them in a c-chip-set.

Remove button

If removable is enabled, the remove button is rendered automatically. The chip emits remove; removing it from the page is up to you, as the example does with (remove). A standalone chip does not move focus after removal; chips in a chip set do.

import { Component, signal } from '@angular/core';
import { ChipComponent } from '@coreui/angular';

@Component({
  selector: 'docs-chip-remove-button',
  templateUrl: './chip-remove-button.component.html',
  imports: [ChipComponent]
})
export class ChipRemoveButtonComponent {
  readonly chips = signal([
    { label: 'Chip 1', disabled: false },
    { label: 'Chip 2', disabled: false },
    { label: 'Chip 3', disabled: true },
    { label: 'Chip 4', disabled: false }
  ]);

  removeChip(label: string) {
    this.chips.update((chips) => chips.filter((chip) => chip.label !== label));
  }
}

<div class="d-flex flex-wrap gap-1">
  @for (chip of chips(); track chip.label) {
    <c-chip removable [disabled]="chip.disabled" (remove)="removeChip(chip.label)">{{ chip.label }}</c-chip>
  }
</div>

Keyboard behavior

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

When a chip is focused

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

Mouse interaction

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

Accessibility

A selectable chip is a toggle button: role="button" with aria-pressed reflecting its state. Inside a selectable c-chip-set it becomes an option with aria-selected instead. When a toggle chip is also removable, it takes its text as aria-label unless you set one, so the remove button inside it does not add to the chip’s name. Set aria-label yourself when the chip content carries images or labelled icons.
A chip that is only removable keeps no role and no ARIA state; its remove button is a real <button> named after the chip, e.g. “Remove Angular”. Set ariaRemoveLabel on the chip to give the full name yourself, for example in another language.
aria-disabled is set only on chips that have a role; a disabled chip also loses its remove button and its tab stop.
The chip text used for the remove button skips icons (svg) and anything with aria-hidden="true". Give icon fonts aria-hidden="true". The name follows the text when it changes; set value on such chips so they keep their identity in a chip set.
Use role to override the role a chip takes from its context.

Customizing

CSS variables

Angular 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