Button types
There are five types of common buttons: elevated, filled, filled tonal, outlined, and text
<mc-button>Text</mc-button>
<mc-button elevated>Elevated</mc-button>
<mc-button filled>Filled</mc-button>
<mc-button filled-tonal>Filled tonal</mc-button>
<mc-button outlined>Outlined</mc-button>
<mc-button>
<mc-icon slot="leading-icon">home</mc-icon>
Icon
</mc-button>
<mc-button cut disabled outlined>Disabled</mc-button>
Shape cut
Shape cut uses the CSS paint API paintWorklet. This is not supported on all browsers. If not supported the shape will default to rounded
<!-- Add cut attribute to control individual buttons -->
<mc-button cut>Text</mc-button>
<!-- Add cut attribute to parent element to control groups of buttons -->
<div cut>
<div>
<mc-button>Text</mc-button>
</div>
</div>
Style
CSS variables that allow you override default values
/* Optional variables for overriding */
--mc-button-shape: var(--mc-shape-extra-large);
--mc-button-color: var(--mc-primary);
--mc-button-color-filled: var(--mc-on-primary);
--mc-button-container-color-filled: var(--mc-primary);
--mc-button-color-disabled: rgb(from var(--mc-on-surface) r g b / 38%);
--mc-button-container-color-disabled: rgb(from var(--mc-on-surface) r g b / 12%);
--mc-button-color-elevated: var(--mc-primary);
--mc-button-container-color-elevated: var(--mc-surface-container-low);
--mc-button-color-filled-tonal: var(--mc-on-secondary-container);
--mc-button-container-color-filled-tonal: var(--mc-secondary-container);
--mc-button-color-outlined: var(--mc-primary);
--mc-button-container-color-outlined: var(--mc-button-outlined-container-color);
--mc-button-outline-color-outlined: var(--mc-outline);