Détail du package

@maggioli-design-system/mds-button

moodysmiles1.8kMIT6.8.1

mds-button is a web-component from Magma Design System, 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.

readme

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

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