Chip

Usage

Chip shows a short label for applied filters, selected values, or lightweight metadata. Use variant, outline, and large for presentation; add an icon or dismiss control when the context calls for it.

Do

• Use dismiss with a close listener when people can remove an applied filter or tag.
• Keep labels short and readable; chips truncate with ellipsis when space is tight.
• Use outline for lower emphasis or on tinted backgrounds; use filled variant values for stronger emphasis.
• Provide a custom accessible name on close-button slot content when the default “Remove …” label is not enough.

Don’t

• Don’t use chips for static status that cannot be removed—prefer Badge.
• Don’t use a chip as the only way to complete a task; pair removable chips with clear surrounding copy.
• Don’t rely on color alone; the label should still read clearly.

Variants

Name	Purpose
primary	Default brand emphasis.
secondary	Lower-emphasis tinted surface.
success	Positive or confirmed context.
danger	Destructive or error-adjacent context.
warning	Needs attention without blocking.
info	Informational context.
light	Subtle chip on busy backgrounds.
dark	Strong contrast on light surfaces.

Set outline for a bordered presentation with a transparent fill.

Events

Event	Detail	Description
close	—	Fired when the built-in dismiss control is activated (dismiss). Listen with @close / addEventListener("close", …).

Slots

Slot	Description
default	Label text; overrides label.
icon	Leading icon markup; overrides the icon attribute.
close-button	Custom dismiss control when dismiss is set.