Home
Button
Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
Usage
<wc-button>Button</wc-button>
Variants
Here are several predefined button styles, each serving its own semantic purpose.
<div class="button-demo-container">
<h3 class="text-title button-demo-title">Default Variants</h3>
<div class="button-demo-area">
<wc-button variant="elevated">Elevated</wc-button>
<wc-button>Filled</wc-button>
<wc-button variant="tonal">Tonal</wc-button>
<wc-button variant="outlined">Outlined</wc-button>
<wc-button variant="text">Text</wc-button>
<wc-button variant="neo">Neo-Brutalism</wc-button>
</div>
</div>
<div class="button-demo-container">
<h3 class="text-title button-demo-title">Toggle Variants - Unselected</h3>
<div class="button-demo-area">
<wc-button variant="elevated" toggle="true">Elevated</wc-button>
<wc-button toggle="true">Filled</wc-button>
<wc-button variant="tonal" toggle="true">Tonal</wc-button>
<wc-button variant="outlined" toggle="true">Outlined</wc-button>
</div>
</div>
<div class="button-demo-container">
<h3 class="text-title button-demo-title">Toggle Variants - Selected</h3>
<div class="button-demo-area">
<wc-button variant="elevated" toggle="true" selected="true">Elevated</wc-button>
<wc-button toggle="true" selected="true">Filled</wc-button>
<wc-button variant="tonal" toggle="true" selected="true">Tonal</wc-button>
<wc-button variant="outlined" toggle="true" selected="true">Outlined</wc-button>
</div>
</div>
<wc-button block="true">Block</wc-button>
The level property serves as syntactic sugar, allowing you to quickly define a button's visual identity without manually configuring individual style attributes.
level="primary": A shorthand for applying both the filled variant and the primary brand color simultaneously.
<wc-button level="primary">Primary</wc-button>
<wc-button level="secondary">Secondary</wc-button>
<wc-button level="tertiary">Tertiary</wc-button>
<wc-button level="danger">Danger</wc-button>
Colors
Buttons come in different colors to indicate the action or the type of button. The following example shows the different colors available for the button component.
<wc-button color="primary">Primary</wc-button>
<wc-button color="secondary">Secondary</wc-button>
<wc-button color="tertiary">Tertiary</wc-button>
<wc-button color="success">Success</wc-button>
<wc-button color="danger">Danger</wc-button>
<wc-button color="surface">Surface</wc-button>
<wc-button color="on-surface">On Surface</wc-button>
Define custom colors
<style>
.custom-button {
--filled-button-container-color: var(--color-yellow-90);
--filled-button-label-text-color: var(--color-black);
--button-container-shape: 9999px;
}
</style>
<wc-button class="custom-button">Custom</wc-button>
Sizes
Fancy larger or smaller buttons? Add size attribute for additional sizes.
<wc-button size="xs">Extra small</wc-button>
<wc-button>Small</wc-button>
<wc-button size="md">Medium</wc-button>
<wc-button size="lg">Large</wc-button>
<wc-button size="xl">Extra large</wc-button>
Icon
<wc-button><wc-icon slot="icon" name="chevron_left"></wc-icon> Previous</wc-button>
<wc-button variant="outlined"><wc-icon slot="icon" name="chevron_left"></wc-icon> Previous</wc-button>
<wc-button trailing-icon="true" variant="text"><wc-icon slot="icon" name="chevron_right"></wc-icon> Next</wc-button>
<wc-button>
<wc-icon slot="icon" name="chevron_right"></wc-icon>
</wc-button>
States
Selected
Make buttons look active by adding the selected boolean attribute to any
<button> element.
<wc-button selected="true">Primary</wc-button>
Disabled
Make buttons look inactive by adding the disabled boolean attribute to
any <button> element.
<wc-button variant="elevated" disabled="true"><wc-icon name="home" slot="icon"></wc-icon>Elevated</wc-button>
<wc-button disabled="true">Filled</wc-button>
<wc-button variant="tonal" disabled="true">Tonal</wc-button>
<wc-button variant="outlined" disabled="true">Outline</wc-button>
<wc-button variant="text" disabled="true">Ghost</wc-button>
Soft disabled
Make buttons look inactive by adding the soft-disabled boolean attribute to
any <button> element. But the button is still be focusable for accessibility reasons.
<wc-button soft-disabled="true">Elevated</wc-button>
Skeleton
Use the skeleton state to display a button while its content is loading.
<wc-button skeleton="true">Elevated</wc-button>
Events
<wc-button id="click-me-btn">Click me</wc-button>
<wc-button disabled="true" id="disabled-btn">Disabled Button</wc-button>
<wc-button toggle="true" id="toggle-btn"><wc-icon name="home" slot="icon"></wc-icon>Toggle Button</wc-button>
<script>
document.querySelector('#click-me-btn').addEventListener('click', (event) => {
myConsole.log('IconButton clicked', '<wc-button>');
});
document.querySelector('#disabled-btn').addEventListener('click', (event) => {
myConsole.log('IconButton clicked', '<wc-button disabled>');
});
const $toggleBtn = document.querySelector('#toggle-btn');
$toggleBtn.addEventListener('click', (event) => {
$toggleBtn.selected = !$toggleBtn.selected;
debugger;
if ($toggleBtn.selected) {
$toggleBtn.querySelector('wc-icon').name = 'home-fill';
} else {
$toggleBtn.querySelector('wc-icon').name = 'home';
}
myConsole.log('ToggleButton clicked', '<wc-button toggle>');
});
</script>
On this page
Button
Usage Variants Colors Sizes Icon States Events