Skip to content

Summary chip

Summary chips are compact components designed to quickly and concisely summarize data. They are often used to provide a condensed overview, summarize states, and allow for filtering of information in a visually appealing manner.

Usage

Summary chip

There are basically two main use cases for the summary chip component:

  • State indication: To show values of different categories, such as Override, Success, Issue, Not tested, etc.
  • Filtering: To filter datasets or information based on the specific categories.

When to use

Arrange one or more Summary Chips in a horizontal layout above or near the related content. Chips can be combined with other supporting elements, such as badges, buttons, or links, to enhance functionality. Place them within a container that can use a background of None, Base-0, or Base-1, depending on the visual requirements.

Summary chip example

Except where otherwise noted, content on this site is licensed under MIT License.