Skip to main content

Chip

cds-chip

The chip element highlights key feedback information, providing a compact and visually distinct way to display content that enhances user interaction and navigation within the interface.

Default​

  • Feedback: --information
  • Size: --medium
Default chip
Default chip
<div class="cds-chip">
  <span class="cds-chip__text">Default chip</span>
</div>

Elements​

ElementCodeParentHTML tagRequired
Textcds-chip__textBlock: cds-chip<span>required

Modifiers​

ModifierOptions
Feedback--information, --success, --alert, --error
Size--small, --medium

Feedback​

Information chip
Success chip
Alert chip
Error chip
Example
<div class="cds-chip cds-chip--success">
  <span class="cds-chip__text">Success chip</span>
</div>

Size​

Small chip
Medium chip
Example
<div class="cds-chip cds-chip--small">
  <span class="cds-chip__text">Small chip</span>
</div>

States​

ModifierOptions
Statesis-highlighted, is-loading

Is highlighted​

Information chip
Success chip
Alert chip
Error chip
Example
<div class="cds-chip cds-chip--information is-highlighted">
  <span class="cds-chip__text">Highlighted Information chip</span>
</div>
FEEDBACK COMPONENTS

The Chip component supports both normal and highlighted feedback states, utilizing the shared feedback mixins. The choice between these states depends on the level of emphasis you wish to apply in each situation. Use the normal state for subtle feedback and the highlighted state for messages that require more focus or attention.

Is loading​

Default Information chip
Loading chip
Example
<div class="cds-chip is-loading">
  <span class="cds-chip__text">Loading chip</span>
</div>