mds-label

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 | | ------------- | -------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | deletable | deletable | Enables the cross icon to perform cancel/delete action on element | boolean | false | | labelAction | label-action | Specifies the ARIA label for remove element | string \| undefined | 'Rimuovi' | | tone | tone | Sets the tone of the color variant | "quiet" \| "strong" \| "weak" | 'quiet' | | truncate | truncate | Truncates text inside the label or displays it in multiline if needed | "all" \| "none" \| "word" \| undefined | undefined | | typography | typography | Specifies the typography of the element | "action" \| "caption" \| "detail" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "hack" \| "label" \| "option" \| "paragraph" \| "snippet" \| "tip" | 'caption' | | variant | variant | Sets the theme variant colors | "amaranth" \| "aqua" \| "blue" \| "dark" \| "error" \| "green" \| "info" \| "light" \| "lime" \| "orange" \| "orchid" \| "sky" \| "success" \| "violet" \| "warning" \| "yellow" | 'sky' |

Events

| Event | Description | Type | | ---------------- | ---------------------------------------- | ------------------- | | mdsLabelDelete | Emits when the label has to be cancelled | CustomEvent<void> |

Methods

updateLang() => Promise<void>

Returns

Type: Promise<void>

Slots

| Slot | Description | | ----------- | -------------------------------------------------------------------------------------- | | "default" | Add text string to this slot, avoid to add HTML elements or components here. |

CSS Custom Properties

| Name | Description | | ---------------------------------- | ----------------------------------------------- | | --mds-label-background | Sets the background-color of the component | | --mds-label-color | Sets the text color of the component | | --mds-label-icon-color | Sets the color of the icon | | --mds-label-selection-background | Sets the selection background color of the text | | --mds-label-selection-color | Sets the selection color of the text |

Dependencies

Depends on

• mds-text
• mds-button

Graph

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

Built with love @ Gruppo Maggioli from R&D Department