<exmg-button>

exmg-button

Material button including loading (spinner) animation when loading attribute is set to element. This button extends the material @material/mwc-button.

Installation

npm install @exmg/exmg-button

Example Usage

Disabled

<exmg-button disabled>This button is disabled</exmg-button>

Outlined

<exmg-button outlined>This button is outlined</exmg-button>

Dense

<exmg-button dense>This button is dense</exmg-button>

Unelevated

<exmg-button unelevated>This button is unelevated</exmg-button>

Loading

<exmg-button loading>This button is in loading state</exmg-button>

Progress

<exmg-button progress="45">This button is showing progress</exmg-button>

API

Slots

| Name | Description | | --------- | --------------------------------- | | default | Element to show within the button |

Properties/Attributes

| Name | Type | Default | Description | | ------------ | --------- | ----------- | --------------------------------------------------------------------------------- | | loading | boolean | false | Whether or not the button is in loading state | | progress | number | undefined | Whether or not the button displays progress | | unelevated | boolean | false | Creates a contained button that is flush with the surface. | | outlined | boolean | false | Creates an outlined button that is flush with the surface. | | dense | boolean | false | Makes the button text and container slightly smaller. | | disabled | boolean | false | Disabled buttons cannot be interacted with and have no visual interaction effect. | | fullwidth | boolean | false | When true, the button is expanded to fit the entire available space. | | icon | string | '' | Icon to display, and aria-label value when label is not defined. | | label | string | '' | Label to display for the button, and aria-label. |

Methods

None

Events

None

CSS Custom Properties

| Target | Variable | Value | | :------------------: | :------------------------------: | :-----: | | Spinner Size | --exmg-spinner-size | 28px | | Spinner Color | --exmg-spinner-color | grey | | Spinner Stroke Width | --exmg-spinner-stroke-width | 3px | | Progress Color | --exmg-button-progress-color | #89c8ff | | Progress Direction | --exmg-button-progress-direction | rtl |

Additional references

• Additional Documentation

• Demo