Icon Button

Icon buttons allow users to take actions, and make choices, with a single tap.

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>

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.


  <wc-icon-button type="primary"><wc-icon name="home"></wc-icon></wc-icon-button>
  <wc-icon-button type="secondary"><wc-icon name="home"></wc-icon></wc-icon-button>
  <wc-icon-button type="tertiary"><wc-icon name="home"></wc-icon></wc-icon-button>
  <wc-icon-button type="danger"><wc-icon name="delete"></wc-icon></wc-icon-button>


  <wc-icon-button shape="square"><wc-icon name="home"></wc-icon></wc-icon-button>
  <wc-icon-button shape="round"><wc-icon name="home"></wc-icon></wc-icon-button>
  <wc-icon-button shape="narrow"><wc-icon name="more_vert"></wc-icon></wc-icon-button>
  <wc-icon-button shape="wide"><wc-icon name="edit"></wc-icon></wc-icon-button>

Icon Button

Usage

Variants

API Reference

Properties

Events

CSS Custom Properties

Icon Button