Header Button

import "@taprootio/espalier/header";

<esp-header-button>

A styled icon button designed for the buttons slot of <esp-header>. Each button wraps an SVG icon and dispatches an esp-clicked event when activated.

The button sizes itself to match the header height and transitions its background color on hover.

Slots

<esp-header-button> has a slot:

Default

Optional custom SVG icon. Slotted icons override the generated SVG from the icon attribute and are automatically sized to var(--esp-size-medium).

Attributes

<esp-header-button> has the following attributes:

aria-label

aria-label has a default value of null.

Accessible label for icon-only buttons. When set, the inner <button> receives an aria-label so screen readers announce the button's purpose instead of silence.

icon

icon has a default value of "".

Optional icon name from the configured Espalier SVG sprite. Slotted SVG content remains supported and overrides this value.

Events

<esp-header-button> emits the following events:

esp-clicked

esp-clicked is of type CustomEvent.

Dispatched when the button is clicked. The event bubbles and is composed.

CSS Properties

<esp-header-button> has the following CSS properties:

--esp-header-button-background

The background color of the button. Defaults to var(--esp-color-layer-3).

--esp-header-button-background-hover

The background color of the button on hover. Defaults to var(--esp-color-layer-4).

--esp-header-button-box-shadow

The box shadow of the button. Defaults to 0px 0px 3px 0px var(--esp-color-shadow).

--esp-header-button-border-left

The left border of the button. Defaults to 1px dotted var(--esp-color-border).

--esp-header-button-color

The text and icon color of the button. Defaults to var(--esp-color-text).