@maggioli-design-system/mds-button

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

• mds-spinner
• mds-icon
• mds-text

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