@maggioli-design-system/mds-label NPM

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 JavaScirpt 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>`

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

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

@maggioli-design-system/mds-button @maggioli-design-system/mds-text @maggioli-design-system/styles @stencil/core

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-571 @zalastax/nolb-_mag

21 days ago

3 months ago

3 months ago

3 months ago