Icon Button

Icon 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. IconButton labels express what action will occur when the user interacts with it.

Overview

API

Usage


  <wc-icon-button><wc-icon name="home"></wc-icon></wc-icon-button>

Variants

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


  <wc-icon-button variant="elevated"><wc-icon name="home"></wc-icon></wc-icon-button>
  <wc-icon-button><wc-icon name="home"></wc-icon></wc-icon-button>
  <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
  <wc-icon-button variant="outlined"><wc-icon name="home"></wc-icon></wc-icon-button>
  <wc-icon-button variant="text"><wc-icon name="home"></wc-icon></wc-icon-button>
  <wc-icon-button variant="neo"><wc-icon name="home"></wc-icon></wc-icon-button>

Block


  <wc-icon-button block="true"><wc-icon name="home"></wc-icon>Block</wc-icon-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


  <wc-button type="primary">Primary</wc-button>
  <wc-button type="secondary">Secondary</wc-button>
  <wc-button type="tertiary">Tertiary</wc-button>
  <wc-button type="danger">Danger</wc-button>

Icon Button

Usage

Variants

Properties

Events

Methods

CSS Custom Properties