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 JavaScirpt framework you are using.
| 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' |
| Event |
Description |
Type |
mdsLabelDelete |
Emits when the label has to be cancelled |
CustomEvent<void> |
| Slot |
Description |
"default" |
Add text string to this slot, avoid to add HTML elements or components here. |
| 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 |
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
