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.

Overview API

Usage

Button 

  <base-button>Button</base-button>

Variants

Here are several predefined button styles, each serving its own semantic purpose.

Elevated Filled / Default Tonal Outlined Text Neo-Brutalism 

  <base-button variant="elevated">Elevated</base-button>
  <base-button>Filled / Default</base-button>
  <base-button variant="tonal">Tonal</base-button>
  <base-button variant="outlined">Outlined</base-button>
  <base-button variant="text">Text</base-button>
  <base-button variant="neo">Neo-Brutalism</base-button>
Block 

  <base-button block="true">Block</base-button>

The type property property serves as syntactic sugar, allowing you to quickly define a button's visual identity without manually configuring individual style attributes.

type="primary": A shorthand for applying both the filled variant and the primary brand color simultaneously.

Primary Secondary Tertiary Danger 

  <base-button type="primary">Primary</base-button>
  <base-button type="secondary">Secondary</base-button>
  <base-button type="tertiary">Tertiary</base-button>
  <base-button type="danger">Danger</base-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.

Primary Success Danger Light Dark 


  <base-button color="primary">Primary</base-button>
  <base-button color="success">Success</base-button>
  <base-button color="danger">Danger</base-button>
  <base-button color="light">Light</base-button>
  <base-button color="dark">Dark</base-button>

Define custom colors

Custom 


  
  <style>
    .custom-button {
      --filled-button-container-color: var(--color-yellow-90);
      --filled-button-label-text-color: var(--color-black);
      --button-container-shape: 9999px;
    }
  </style>

  <base-button class="custom-button">Custom</base-button>

Sizes

Fancy larger or smaller buttons? Add size attribute for additional sizes.

Extra small Small Medium Large Extra large 

  <base-button size="xs">Extra small</base-button>
  <base-button>Small</base-button>
  <base-button size="md">Medium</base-button>
  <base-button size="lg">Large</base-button>
  <base-button size="xl">Extra large</base-button>

Icon

Previous Previous Next 

  <base-button icon-align="start"><base-icon slot="icon" name="chevron_left"></base-icon> Previous</base-button>

  <base-button icon-align="start" variant="outlined"><base-icon slot="icon" name="chevron_left"></base-icon> Previous</base-button>
  <base-button variant="text"><base-icon slot="icon" name="chevron_right"></base-icon> Next</base-button>

States

Selected

Make buttons look active by adding the selected boolean attribute to any <button> element.

Primary 

  <base-button selected="true">Primary</base-button>

Disabled

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

Elevated Filled Tonal Outline Ghost 

  <base-button variant="elevated" disabled="true">Elevated</base-button>
  <base-button disabled="true">Filled</base-button>
  <base-button variant="tonal" disabled="true">Tonal</base-button>
  <base-button variant="outlined" disabled="true">Outline</base-button>
  <base-button variant="text" disabled="true">Ghost</base-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.

Elevated 

  <base-button soft-disabled="true">Elevated</base-button>

Skeleton

Use the skeleton state to display a button while its content is loading.

Elevated 

  <base-button skeleton="true">Elevated</base-button>

Events

Click me Disabled Button 

  <base-button id="click-me-btn">Click me</base-button>
  <base-button disabled="true" id="disabled-btn">Disabled Button</base-button>

  <script>
    document.querySelector('#click-me-btn').addEventListener('click', (event) => {
      myConsole.log('IconButton clicked', '<base-button>');
    });
    document.querySelector('#disabled-btn').addEventListener('click', (event) => {
      myConsole.log('IconButton clicked', '<base-button disabled>');
    });
  </script>

On this page

Button

UsageVariantsColorsSizesIconStatesEvents

Properties

Events

Methods

CSS Custom Properties