mds-button
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
active |
active |
Specifies if the button is active or not | boolean |
undefined |
|||||||||||
autoFocus |
auto-focus |
Specifies if the component is focused when is loaded on the viewport | boolean |
undefined |
|||||||||||
await |
await |
Specifies if the button is awaiting for a response | `boolean \ | undefined` | undefined |
||||||||||
disabled |
disabled |
Specifies if the component is disabled or not | `boolean \ | undefined` | undefined |
||||||||||
hasText |
has-text |
boolean |
undefined |
||||||||||||
href |
href |
Specifies the URL target of the button | `string \ | undefined` | undefined |
||||||||||
icon |
icon |
The icon displayed in the button | `string \ | undefined` | undefined |
||||||||||
iconPosition |
icon-position |
Specifies the horizontal position of the icon displayed in the button | `"left" \ | "right" \ | undefined` | 'left' |
|||||||||
size |
size |
Specifies the size for the button | `"lg" \ | "md" \ | "sm" \ | "xl"` | 'md' |
||||||||
target |
target |
Specifies the target of the URL, if self or blank | `"blank" \ | "self"` | 'self' |
||||||||||
tone |
tone |
Specifies the tone variant for the button | `"ghost" \ | "quiet" \ | "strong" \ | "weak" \ | undefined` | 'strong' |
|||||||
truncate |
truncate |
Specifies if the text shoud be truncated or should behave as a normal text | `"all" \ | "none" \ | "word" \ | undefined` | 'word' |
||||||||
type |
type |
The type of the button element | `"a" \ | "button" \ | "reset" \ | "submit" \ | undefined` | 'submit' |
|||||||
variant |
variant |
Specifies the color variant for the button | `"ai" \ | "apple" \ | "dark" \ | "error" \ | "google" \ | "info" \ | "light" \ | "primary" \ | "secondary" \ | "success" \ | "warning" \ | undefined` | 'primary' |
Slots
Slot | Description |
---|---|
"default" |
Add text string to this slot, avoid to add HTML elements or components here. |
"notification" |
Add HTML elements or components , it is recommended to use mds-notification element. |
Shadow Parts
Part | Description |
---|---|
"icon" |
The icon inside the component |
"label" |
CSS Custom Properties
Name | Description |
---|---|
--mds-button-await-duration |
Sets the duration of the rotation of the spinner await component |
--mds-button-background |
Sets the background-color of the component |
--mds-button-border-color |
Sets the color of the border of the component (based on box-shadow declaration) |
--mds-button-border-default-opacity |
Sets the default opacity of the border color of the component (based on box-shadow declaration) |
--mds-button-border-high-contrast-hover-width |
Sets the width of the border when the component is hovered and the contrast is high (based on box-shadow declaration) |
--mds-button-border-high-contrast-width |
Sets the width of the border of the component and the contrast is high (based on box-shadow declaration) |
--mds-button-border-hover-opacity |
Sets the opacity of the border color when the component is hovered (based on box-shadow declaration) |
--mds-button-border-opacity |
Sets the border opacity of the component (based on box-shadow declaration) |
--mds-button-border-tone-ghost-hover-width |
Sets the width of the border when the component is hovered when the tone is set to ghost (based on box-shadow declaration) |
--mds-button-border-tone-strong-hover-width |
Sets the width of the border when the component is hovered when the tone is set to strong (based on box-shadow declaration) |
--mds-button-border-tone-weak-hover-width |
Sets the width of the border when the component is hovered when the tone is set to weak (based on box-shadow declaration) |
--mds-button-border-width |
Sets the border width of the component (based on box-shadow declaration) |
--mds-button-color |
Sets the text color of the component |
--mds-button-gap |
Sets the distance betwen element inside the components, use it instead of setting gap property directly. |
--mds-button-radius |
Sets the border-radius of the component |
Dependencies
Used by
- mds-banner
- mds-breadcrumb
- mds-button-dropdown
- mds-calendar
- mds-calendar-cell
- mds-chip
- mds-file-preview
- mds-header-bar
- mds-horizontal-scroll
- mds-img
- mds-input
- mds-input-date
- mds-input-date-range
- mds-input-date-range-preselection
- mds-input-upload
- mds-keyboard
- mds-label
- mds-modal
- mds-note
- mds-policy-ai
- mds-pref-language-item
- mds-push-notification
- mds-push-notification-item
- mds-radial-menu
- mds-radial-menu-item
- mds-tab-item
- mds-table-header-cell
- mds-tree-item
- mds-url-view
Depends on
Graph
graph TD;
mds-button --> mds-spinner
mds-button --> mds-icon
mds-button --> mds-text
mds-banner --> mds-button
mds-breadcrumb --> mds-button
mds-button-dropdown --> mds-button
mds-calendar --> mds-button
mds-calendar-cell --> mds-button
mds-chip --> mds-button
mds-file-preview --> mds-button
mds-header-bar --> mds-button
mds-horizontal-scroll --> mds-button
mds-img --> mds-button
mds-input --> mds-button
mds-input-date --> mds-button
mds-input-date-range --> mds-button
mds-input-date-range-preselection --> mds-button
mds-input-upload --> mds-button
mds-keyboard --> mds-button
mds-label --> mds-button
mds-modal --> mds-button
mds-note --> mds-button
mds-policy-ai --> mds-button
mds-pref-language-item --> mds-button
mds-push-notification --> mds-button
mds-push-notification-item --> mds-button
mds-radial-menu --> mds-button
mds-radial-menu-item --> mds-button
mds-tab-item --> mds-button
mds-table-header-cell --> mds-button
mds-tree-item --> mds-button
mds-url-view --> mds-button
style mds-button fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department