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 | false | | tone | tone | Sets the color variant tone of the component | "strong" \| "weak" \| undefined | 'strong' | | variant | variant | Sets the color variant of the component | "dark" \| "error" \| "info" \| "primary" \| "secondary" \| "success" \| "warning" \| 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

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