Icon Button

<wa-icon-button>

Since 2.0

stable

Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.

For a full list of icons that come bundled with Web Awesome, refer to the icon component.

<wa-icon-button name="gear" label="Settings"></wa-icon-button>

Examples Jump to heading

Sizes Jump to heading

Icon buttons inherit their parent element's font-size.

<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 1.5rem;"></wa-icon-button>
<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2rem;"></wa-icon-button>
<wa-icon-button name="pen-to-square" variant="solid" label="Edit" style="font-size: 2.5rem;"></wa-icon-button>

Colors Jump to heading

Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the base part.

<div class="icon-button-color">
  <wa-icon-button name="bold" variant="solid" label="Bold"></wa-icon-button>
  <wa-icon-button name="italic" variant="solid" label="Italic"></wa-icon-button>
  <wa-icon-button name="underline" variant="solid" label="Underline"></wa-icon-button>
</div>

<style>
  .icon-button-color wa-icon-button::part(base) {
    color: #b00091;
  }

  .icon-button-color wa-icon-button::part(base):hover,
  .icon-button-color wa-icon-button::part(base):focus {
    color: #c913aa;
  }

  .icon-button-color wa-icon-button::part(base):active {
    color: #960077;
  }
</style>

Link Buttons Jump to heading

Use the href attribute to convert the button to a link.

<wa-icon-button name="gear" variant="solid" label="Settings" href="https://example.com" target="_blank"></wa-icon-button>

Add a tooltip that references the id of the icon button to provide contextual information.

Settings

<wa-icon-button id="icon-button" name="gear" variant="solid" label="Settings"></wa-icon-button>
<wa-tooltip for="icon-button">Settings</wa-tooltip>

Disabled Jump to heading

Use the disabled attribute to disable the icon button.

<wa-icon-button name="gear" variant="solid" label="Settings" disabled></wa-icon-button>

Properties Jump to heading

Name	Description	Reflects
`name` `name`	The name of the icon to draw. Available names depend on the icon library being used. Type `string \| null` Default `null`
`family` `family`	The family of icons to choose from. For Font Awesome, valid options include `classic`, `sharp`, `duotone`, and `brands`. Custom icon libraries may or may not use this property. Type `string`
`variant` `variant`	The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for the classic and sharp families. Custom icon libraries may or may not use this property. Type `string`
`library` `library`	The name of a registered custom icon library. Type `string \| undefined`
`src` `src`	An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and can result in XSS attacks. Type `string \| undefined`
`href` `href`	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. Type `string \| undefined`
`target` `target`	Tells the browser where to open the link. Only used when `href` is set. Type `'_blank' \| '_parent' \| '_self' \| '_top' \| undefined`
`download` `download`	Tells the browser to download the linked file as this filename. Only used when `href` is set. Type `string \| undefined`
`label` `label`	A description that gets read by assistive devices. For optimal accessibility, you should always include a label that describes what the icon button does. Type `string` Default `''`
`disabled` `disabled`	Disables the button. Type `boolean` Default `false`

Methods Jump to heading

Name	Description	Arguments
`click()`	Simulates a click on the icon button.
`focus()`	Sets focus on the icon button.	`options: FocusOptions`
`blur()`	Removes focus from the icon button.

Events Jump to heading

Name	Description
`wa-blur`	Emitted when the icon button loses focus.
`wa-focus`	Emitted when the icon button gains focus.

CSS custom properties Jump to heading

Name	Description
`--background-color-hover`	The color of the button's background on hover.

CSS parts Jump to heading

Name	Description
`base`	The component's base wrapper.

Dependencies Jump to heading

This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.

<wa-icon>

Importing Jump to heading

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN

npm

React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/icon-button/icon-button.js';

Coming soon!

Icon Button

Examples Jump to heading #

Sizes Jump to heading #

Colors Jump to heading #

Link Buttons Jump to heading #

Icon Button with Tooltip Jump to heading #

Disabled Jump to heading #

Properties Jump to heading #

Methods Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Dependencies Jump to heading #

Importing Jump to heading #