MButton Theming

CSS Variables

Applicable to MButton only.

If you set this variable it would take priority over the default library variables.

These variables are not defined.

Colors

Name	Description
--m-button-text-primary	MButton text & icon color.

Typography

Name	Description
--m-button-sm-font	Small MButton text & icon font size.
--m-button-sm-font	Normal MButton text & icon font size.
--m-button-lg-font	Large MButton text & icon font size.

Paddings

Name	Description
--m-button-sm-padding	Small MButton padding.
--m-button-sm-padding	Normal MButton padding.
--m-button-lg-padding	Large MButton padding.

Sizes

Name	Description
--m-button-sm-size	Small MButton minimum size min-height & min-width
--m-button-sm-size	Normal MButton minimum size min-height & min-width
--m-button-lg-size	Large MButton minimum size min-height & min-width

Border-radius

Name	Description
--m-button-border-radius	MButton default border-radius.
--m-button-rounded-radius	MButton rounded border-radius.

Box-shadow

Name	Description
--m-button-raised-shadow	Raised MButton box-shadow.

Opacities

Name	Description
--m-button-disabled-opacity	MButton disabled opacity.
--m-button-loading-opacity	MButton loading opacity.

Variants

Primary

Name	Description
--m-button-primary	MButton primary color.
--m-button-primary-filled-hover	MButton primary filled hover color.
--m-button-primary-text-hover	MButton primary text hover color.
--m-button-primary-outlined-hover	MButton primary outlined hover color.

Secondary

Name	Description
--m-button-secondary	MButton secondary color.
--m-button-secondary-filled-hover	MButton secondary filled hover color.
--m-button-secondary-text-hover	MButton secondary text hover color.
--m-button-secondary-outlined-hover	MButton secondary outlined hover color.

Success

Name	Description
--m-button-success	MButton success color.
--m-button-success-filled-hover	MButton success filled hover color.
--m-button-success-text-hover	MButton success text hover color.
--m-button-success-outlined-hover	MButton success outlined hover color.

Info

Name	Description
--m-button-info	MButton info color.
--m-button-info-filled-hover	MButton info filled hover color.
--m-button-info-text-hover	MButton info text hover color.
--m-button-info-outlined-hover	MButton info outlined hover color.

Warning

Name	Description
--m-button-warning	MButton warning color.
--m-button-warning-filled-hover	MButton warning filled hover color.
--m-button-warning-text-hover	MButton warning text hover color.
--m-button-warning-outlined-hover	MButton warning outlined hover color.

Help

Name	Description
--m-button-help	MButton help color.
--m-button-help-filled-hover	MButton help filled hover color.
--m-button-help-text-hover	MButton help text hover color.
--m-button-help-outlined-hover	MButton help outlined hover color.

Danger

Name	Description
--m-button-danger	MButton danger color.
--m-button-danger-filled-hover	MButton danger filled hover color.
--m-button-danger-text-hover	MButton danger text hover color.
--m-button-danger-outlined-hover	MButton danger outlined hover color.

Elements

List of element class selectors.

Name	Element
m-button	MButton element.
m-button__label	MButton element text.
m-button__icon	MButton element icon.
m-button__loading-icon	MButton element loading icon.

Modifiers

List of Modifiers class selectors. They are applied to the component's elements when specific states are triggered.

Name	State
m-button--${severity}	severity="value"
m-button--${size}	size="value"
m-button--${variant}	variant="value"
m-button--rounded	:rounded="true"
m-button--disabled	:disabled="true"
m-button--loading	:loading="true"
m-button--raised	:raised="true"
m-button--icon-only	Applied if label & default slot do not have a value & icon has a value.
m-button__icon--${iconPosition}	iconPosition="value"