@maggioli-design-system/mds-chip

mds-chip

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.

Properties

Property	Attribute	Description	Type	Default
clickable	clickable	Adds ARIA support to the element if has interaction	boolean | undefined	undefined
deletable	deletable	Shows the cross icon to perform cancel/delete action on element	boolean | undefined	undefined
deleteLabel	delete-label	Sets the cross icon accessibility label to perform cancel/delete action on element	"Rimuovi" | undefined	'Rimuovi'
disabled	disabled	Sets the component disabled status	boolean | undefined	false
icon	icon	The icon displayed to the left of the component's label	string | undefined	undefined
label (required)	label	The label displayed to the right of the component's icon	string	undefined
selected	selected	Sets the component selected	boolean	false

Events

Event	Description	Type
mdsChipClickLabel	Emits when the component's label is clicked	CustomEvent<MdsChipEvent>
mdsChipDelete	Emits when the component's delete button is clicked	CustomEvent<MdsChipEvent>

CSS Custom Properties

Name	Description
--mds-chip-backgroud-selected	Sets the background-color of the component when it's selected
--mds-chip-background	Sets the background-color of the component
--mds-chip-color	Sets the color of the component
--mds-chip-color-selected	Sets the color of the component when it's selected
--mds-chip-icon-background	Sets the background-color of the icon
--mds-chip-icon-background-selected	Sets the background-color color of the icon when the component is selected
--mds-chip-icon-color	Sets the fill color of the icon of the component
--mds-chip-icon-color-selected	Sets the fill color of the icon of the component when it's selected
--mds-chip-opacity-disabled	Sets the opacity of the component when it's disabled

Dependencies

Depends on

• mds-icon
• mds-text
• mds-button

Graph

graph TD;
  mds-chip --> mds-icon
  mds-chip --> mds-text
  mds-chip --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  style mds-chip fill:#f9f,stroke:#333,stroke-width:4px

---

Built with love @ Gruppo Maggioli from R&D Department