Header Button
<esp-header-button>
A styled icon button designed for the buttons slot of
<esp-header>. Each button wraps an
SVG icon and dispatches a 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
Default slot for an SVG icon. The slotted SVG is 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.
Events
<esp-header-button> emits the following events:
clicked
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).