@maggioli-design-system/mds-label

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