Chip Small, interactive element that represents an input, attribute, or action.

CSS Source

Controls

Text As always, keep it simple.

Variant Color variants.

Default Active

With icon With a leading icon.

With close With a trailing close gadget.

State These states will happen automatically when using valid sematic markup. We do include classes to force hover and focus states but you should avoid using those classes in your application.

Default Hover Focus

Properties Jump to heading

Class / Token	Type
`.prs-chip`	Component	Container
`.prs-chip-label`	Part	Container
`.prs-chip_active`	State	Active/Selected
`.prs-chip_hover`	State	Manually apply visual hover
`.prs-chip_focus`	State	Manually apply visual focus
`.prs-chip_disabled`	State	Manually apply visual disabled