Skip to Main Content

Pelican Design System icon Pelican Design System Chip

Chip

Chips allow users to see items added to or removed from a set.

Edit on GitHub

On this page:

Best Practices

  • Chips indicate the presence of a member in a set.
  • They contain a <a> with role="button" to delete them from a data group.
  • Chips are special Badges.
  • Create a parent container with a class of chips to hold the chips.
  • First use Badge markup, then add class="chip".

Usage

Text Text Text Text Text Text Text Text 
<div class="chips">
  <a role="button" href="#" class="badge badge-primary chip"><span class="icon fas fa-times-circle me-1" aria-hidden="true"></span>Text</a>
  <a role="button" href="#" class="badge badge-secondary chip"><span class="icon fas fa-times-circle me-1" aria-hidden="true"></span>Text</a>
  <a role="button" href="#" class="badge badge-accent chip"><span class="icon fas fa-times-circle me-1" aria-hidden="true"></span>Text</a>
  <a role="button" href="#" class="badge badge-ui chip"><span class="icon fas fa-times-circle me-1" aria-hidden="true"></span>Text</a>
  <a role="button" href="#" class="badge badge-info chip"><span class="icon fas fa-times-circle me-1" aria-hidden="true"></span>Text</a>
  <a role="button" href="#" class="badge badge-success chip"><span class="icon fas fa-times-circle me-1" aria-hidden="true"></span>Text</a>
  <a role="button" href="#" class="badge badge-warning chip"><span class="icon fas fa-times-circle me-1" aria-hidden="true"></span>Text</a>
  <a role="button" href="#" class="badge badge-danger chip"><span class="icon fas fa-times-circle me-1" aria-hidden="true"></span>Text</a>
</div>

Resources

Previous
Next
Page top