npm package: @maggioli-design-system/mds-chip
Description: mds-chip is a web-component from Magma Design System, 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.
Author: Vittorio Vittori
Latest version: 3.8.5

# mds-chip



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), 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.

<!-- Auto Generated Below -->


## 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](../mds-policy-ai)

### Depends on

- [mds-icon](../mds-icon)
- [mds-text](../mds-text)
- [mds-button](../mds-button)

### Graph
```mermaid
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](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)