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 |
tone |
tone |
Sets the tone of the color variant |
"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' |
Slot |
Description |
"default" |
Add text string to this slot, avoid to add HTML elements or components here. |
Name |
Description |
--background |
Sets the background-color of the component |
--color |
Sets the text color of the component |
--radius |
Sets the border-radius of the component |
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