@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 JavaScript 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
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
selectable	selectable	Sets if the component change is status to selected when is clicked	boolean | undefined	false
selected	selected	Sets the component selected	boolean | undefined	undefined
tone	tone	Sets the color variant tone of the component	"strong" | "weak" | undefined	'strong'
variant	variant	Sets the color variant of the component	"ai" | "amaranth" | "aqua" | "blue" | "dark" | "error" | "green" | "info" | "lime" | "orange" | "orchid" | "primary" | "secondary" | "sky" | "success" | "violet" | "warning" | "yellow" | undefined	'primary'

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>
mdsChipSelect	Emits when the component's label is clicked and when selectable attribute is set to true	CustomEvent<MdsChipEvent>

Methods

updateLang() => Promise<void>

Returns

Type: Promise<void>

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

Used by

• mds-policy-ai

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
  mds-policy-ai --> mds-chip
  style mds-chip fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department