Live demo — this example is server-driven; run the showcase locally for the interactive version.

Chip

PatternFly v6 chip — a compact element for displaying discrete information.

Warning: Deprecated

The Chip component is deprecated in PatternFly v6. Use the Label component instead. This implementation wraps pf-v6-c-label.

Examples

Basic

A read-only chip displaying text.

Chip Really long chip that goes on and on

With badge

A chip with a count badge.

Chip 7 Chip 24

Removable

A chip with a close button to remove it.

Static removable chip:

Removable chip

Overflow

An overflow chip that acts as a button to show more items.

Documentation

Chip props

Parameters accepted by {#include components/data-display/chip id="..."}text{/include} — the chip text is the include's main block.

Name	Type	Default	Description
`id`	String	—	DOM id on the chip root.
`badge`	String	—	Count badge appended to the chip text.
`removable`	boolean	false	Adds a close button that removes the chip (Alpine).
`overflow`	boolean	false	Renders the chip as an overflow button ("N more").

Usage

Prefer Label. PatternFly v6 removed pf-v6-c-chip; this component exists for migration compatibility and renders label markup underneath. New code should use Label (and label groups) directly.

Edit chip.html on GitHub