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
You can change the button shape to cut globally or per button
/* Change all buttons
For now this only works globally, so you cannot use this in multiple places */
:root {
--mc-shape-cut: 1;
}
<mc-button cut>Text</mc-button>
<mc-button cut elevated>Elevated</mc-button>
<mc-button cut filled>Filled</mc-button>
<mc-button cut filled-tonal>Filled tonal</mc-button>
<mc-button cut outlined>Outlined</mc-button>
<mc-button cut>
<mc-icon slot=leading-icon>home</mc-icon>
Icon
</mc-button>
<mc-button cut disabled outlined>Disabled</mc-button>
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: rgba(from var(--mc-on-surface) r g b / 38%);
--mc-button-container-color-disabled: rgba(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);