Chip<mds-chip>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.
Proprietà
toneenumSets the color variant tone of the component
variantenumSets the color variant of the component
clickableclickablebooleanAdds ARIA support to the element if has interaction
deletabledeletablebooleanShows the cross icon to perform cancel/delete action on element
disableddisabledbooleanSets the component disabled status
selectableselectablebooleanSets if the component change is status to selected when is clicked
selectedselectedbooleanSets the component selected
iconstringThe icon displayed to the left of the component's label
labelstringThe label displayed to the right of the component's icon
Panoramica
The <mds-chip> web component is the Magma Design System’s compact element for representing a discrete piece of information, a filter, a selection, or a removable token. It renders a label with optional leading icon and an optional delete affordance, and can be made interactive (clickable or selectable) to act as a lightweight button-like control rather than a static tag.
Semantic Behavior
Static by default: With no interaction props the chip is a passive, non-focusable label; it becomes a focusable, button-like control only when clickable is set.Selectable implies clickable: Setting selectable automatically turns on clickable, so a selectable chip is always keyboard- and pointer-interactive.Selection toggle: When selectable, activating the chip flips selected; an unselected chip carries no selected attribute (rather than selected="false").Keyboard activation: When interactive, Enter activates the chip just like a pointer click (Space does not).Delete affordance: When deletable, a trailing delete button is rendered with a localized title (el/en/es/it) and emits the delete event on activation.Emitted events: mdsChipClickLabel fires on activation for non-selectable chips, mdsChipSelect fires (carrying the new selected value) for selectable chips, and mdsChipDelete fires from the delete button - all carrying the originating event and host element.Label is text, on one line: Long labels do not wrap (truncate="word" on the inner text).
Properties & Visual Configurations
The shared variant / tone ladders are defined in agents/variants.md; the chip defaults to variant="primary" and tone="strong", and accepts only the minimal 'strong' / 'weak' tone set. variant and tone paint the leading icon badge and the border of a selected chip; the body of the chip stays neutral for every variant.
Other behavioral props
clickable opts the chip into interactivity (focus, keyboard and click handling) without changing its state on activation - use it for chips that act as actions rather than toggles.selectable makes the chip a toggle whose selected state flips on each activation; pick it for filter/choice chips where the visual selected state matters.selected drives the selected visual treatment and can be set externally to pre-select a chip; an unselected chip carries no attribute.deletable adds the trailing cancel button for removable tokens; reserve it for chips the user is meant to dismiss.icon is an SVG filename slug from the Magma icon library, shown decoratively to the left of the label.