3.0.0-alpha.12 Alpha
Components

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

Sizes

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

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>

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>

Icon Button with Tooltip

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

Use the disabled attribute to disable the icon button.

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

Attributes & Properties

Learn more about attributes and properties.

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

Learn more about methods.

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

Learn more about events.

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

CSS custom properties

Learn more about CSS custom properties.

Name Description
--background-color-hover
The color of the button's background on hover.
Default var(--wa-color-neutral-fill-quiet)
--background-color-active
The color of the button's background on :active.
Default var(--wa-color-neutral-fill-quiet)
--text-color-hover
The color of the button's background on hover.
--text-color-active
The color of the button's background on :active.

CSS parts

Learn more about CSS parts.

Name Description
base The component's base wrapper.

Dependencies

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

Importing

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.12/dist/components/icon-button/icon-button.js';
Coming soon! Coming soon!
    No results