CSS only · 3.0.2

Chip

Compact inline tags. SCSS-only: a neutral ng-chip with a 3px precision radius (part of the Brand Signature, in family with button & badge), optionally removable.

Breaking · v3.0.0 Default radius changed from pill → 3px "precision" (in family with button/badge). Want the old pill look? Opt out with .ng-flat. Premium elevation (raised gradient · subtle ring) is now the default.

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>

Shape & icon

Default radius is 3px "precision". Opt back into the old pill look with .ng-flat. Add a leading Phosphor icon inside the chip.

Precision (default, 3px) Pill (.ng-flat)

chip.html

<span class="ng-chip">Precision (default, 3px)</span>
<span class="ng-chip ng-flat">Pill (.ng-flat)</span>

Tagged Ada

chip.html

<span class="ng-chip"><i class="ph ph-tag"></i> Tagged</span>
<span class="ng-chip removable"><i class="ph ph-user"></i> Ada <button type="button" class="ng-chip-close" aria-label="Remove"><i class="ph ph-x"></i></button></span>

Anatomy

ng-chip removable ng-flat ng-chip-close

Reference

Generated from the component source (_ng_chip.scss).

Component info

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

Classes

.ng-chip .ng-chip-close .ng-flat

Tokens

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