@exmg/exmg-button

<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