@maggioli-design-system/mds-badge NPM

mds-badge

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
`tone`	`tone`	Sets the tone of the color variant	`"ghost" \\| "quiet" \\| "strong" \\| "weak" \\| undefined`	`'weak'`
`typography`	`typography`	Specifies the typography of the element	`"caption" \\| "detail" \\| "label" \\| "option" \\| "paragraph" \\| "tip"`	`'option'`
`typographyVariant`	`typography-variant`	Specifies the variant for `typography`	`"code" \\| "info" \\| "read" \\| "title" \\| undefined`	`undefined`
`variant`	`variant`	Sets the theme variant colors	`"amaranth" \\| "aqua" \\| "blue" \\| "dark" \\| "error" \\| "green" \\| "info" \\| "light" \\| "lime" \\| "orange" \\| "orchid" \\| "sky" \\| "success" \\| "violet" \\| "warning" \\| "yellow" \\| undefined`	`'green'`

Slots

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

CSS Custom Properties

Name	Description
`--mds-badge-background`	Sets the background-color of the component
`--mds-badge-color`	Sets the text color of the component
`--mds-badge-radius`	Sets the border-radius of the component

Dependencies

Used by

Depends on

mds-text

Graph

graph TD;
  mds-badge --> mds-text
  mds-file --> mds-badge
  mds-file-preview --> mds-badge
  mds-stepper-bar-item --> mds-badge
  style mds-badge fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department

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

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-570 @maggioli-design-system/mds-file @maggioli-design-system/mds-file-preview @maggioli-design-system/mds-stepper-bar-item @zalastax/nolb-_mag

10 months ago

10 months ago

10 months ago

10 months ago