v1.6
new

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

CSS Source
Controls
As always, keep it simple.
Style variants.
Color variants.
With a leading icon.
With a trailing close gadget.
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.

Properties Jump to heading

Class / Token Type
.prs-chip Component Container
.prs-chip-soft Modifier Soft-style variant
.prs-chip-primary Modifier Primary color (soft only)
.prs-chip-secondary Modifier Secondary color (soft only)
.prs-chip-accent Modifier Accent color (soft only)
.prs-chip-info Modifier Info color (soft only)
.prs-chip-success Modifier Success color (soft only)
.prs-chip-warning Modifier Warning color (soft only)
.prs-chip-danger Modifier Danger color (soft only)
.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

No results...