Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographySpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Chip

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleVariantsColor schemeSpaceInteraction statesStyleVariantsColor schemeSpaceInteraction states

Style

A chip is a checkbox HTML input element. It is styled as text on a pill-shaped background. A close icon appears on the right when a chip is selected. Chips are commonly arranged horizontally in chip groups where a legend or text label is included at the beginning.

Anatomy

Anatomy of chips with numbered annotations pointing to various parts
  1. Chip group
  2. Legend
  3. Chip text
  4. Selected icon
  5. Clear all button

Variants

Style

Each chip state has unique styling based on its function.

Three chips and a clear all button. The second chip is selected, the third is disabled.

Size

There are two available chip sizes: Small and Large. The only difference is the text size. Chip groups also have two legend sizes depending on which chip is used.

Two sets of chips in two columns and two rows. On the left, small chips. On the right, large chips.

Color scheme

Chips and chip groups are available in both light and dark color schemes.

Light scheme

Four chips on a light color scheme displayed in their default format, horizontally across the image.

Dark scheme

Four chips on a dark color scheme displayed in their default format, horizontally across the image.

Space

The space in each chip is the same for both sizes. The --rh-space-md token is used after the legend as well as in between each subsequent chip.

Chips have 8px of horizontal padding, 4px of vertical padding, 8px of margin on the right, and the icon is 16x16.

The --rh-space-lg token is used when chips are stacked.

When chips wrap to more than one line, each item has 16px of margin on the bottom.

Interaction states

Hover

Styles will change on hover depending on how a chip is used.

  • The Default and Selected chip borders change to --rh-border-width-md on hover
  • The Clear all chip border becomes visible and is --rh-border-width-sm on hover
  • A disabled chip has no states
Three sets of two chips on a light color scheme each showing the hover state on the right and the normal state on the left. Three sets of two chips a dark color scheme each showing the hover state on the right and the normal state on the left.

Focus and Active

A focus ring wraps around the text and icon in both focus and active states. Hover state styles remain the same.

Three sets of two chips on a light color scheme each showing the focus state on the right and the normal state on the left. Three sets of two chips a dark color scheme each showing the focus state on the right and the normal state on the left.
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify