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.

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

See the Pen Chips by LA Gov Design Team (@lagovdesignteam) on CodePen.

Resources

Page top