CSS only

Chip

Compact inline tags. SCSS-only: a neutral, pill-shaped ng-chip, optionally removable.

Use chips for tags, filters or selections. A chip inherits the current text colour on a sunken surface; add removable with a ng-chip-close button to let users dismiss it.

Basic

Design Frontend Accessibility

chip.html

<span class="ng-chip">Design</span>
<span class="ng-chip">Frontend</span>
<span class="ng-chip">Accessibility</span>

Removable

The close button removes the chip (wired at the site level). Try it:

JavaScript PHP CSS

chip.html

<span class="ng-chip removable">JavaScript <button type="button" class="ng-chip-close" aria-label="Remove"><i class="ph ph-x"></i></button></span>
<span class="ng-chip removable">PHP <button type="button" class="ng-chip-close" aria-label="Remove"><i class="ph ph-x"></i></button></span>
<span class="ng-chip removable">CSS <button type="button" class="ng-chip-close" aria-label="Remove"><i class="ph ph-x"></i></button></span>

Anatomy

ng-chip removable ng-chip-close

Reference

Generated from the component source (_ng_chip.scss).

Component info

Name	`Chip`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_chip.scss`

Classes

.ng-chip .ng-chip-close

Tokens

--ng-chip-bg --ng-chip-close-space --ng-chip-color