@maggioli-design-system/mds-button NPM

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

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

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