@maggioli-design-system/mds-chip NPM

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>`

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

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

@maggioli-design-system/mds-button @maggioli-design-system/mds-icon @maggioli-design-system/mds-text @maggioli-design-system/styles @stencil/core

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-570 @zalastax/nolb-_mag @maggioli-design-system/mds-policy-ai

9 months ago

9 months ago

10 months ago

11 months ago