Holo Icon Button

The <holo-icon-button> component renders an icon-only button for compact toolbars and actions. Because it has no visible text, the label prop is required and is used as the button’s accessible name via aria-label. The primary variant is flat by default and only gains the holographic tech finish when glow is enabled.

When to use

Use it for:

• A compact action represented by an icon alone: close, edit, copy, menu trigger.
• Toolbars and dense rows where a text label would not fit.

Don’t use it for:

• Actions that can carry a visible text label. Use Button.
• Navigation. Use Link.
• Unfamiliar icons without a text hint. Pair them with a Tooltip or use a text button.

Live Previews

Primary Variant (default)

<holo-icon-button label="Favorite" variant="primary">
  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="..." /></svg>
</holo-icon-button>

Primary Variant with Glow

<holo-icon-button label="Favorite" variant="primary" glow>
  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="..." /></svg>
</holo-icon-button>

Accessibility

The component renders a native <button type="button"> with aria-label set from the required label prop. The slotted icon is not named by the component, so the label is the only accessible name. When disabled, the inner button is natively disabled and the host also sets aria-disabled="true".

Key	Action
Tab	Moves focus to or from the button
Enter, Space	Activates the button

• The focus ring is a 2px outline with a 2px offset on the host, drawn through :host(:focus-within).
• The default size is 2.5rem square (--holo-icon-button-size), above the 24 by 24 CSS px target-size minimum.

You provide:

• A label that describes the action (“Close dialog”), not the icon (“X”).
• An icon that is hidden from assistive technology, for example an <svg aria-hidden="true">, so it does not add noise to the label.
• A size of at least 24 by 24 CSS px if you override --holo-icon-button-size.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-icon-button';

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	If true, the button is disabled and non-interactive.
glow	glow	boolean	false	If true, layers the holographic glow, shimmer scan, and dashed-border treatment onto the primary variant as a purely decorative, opt-in enhancement.
label (required)	label	string	—	The accessible name for the button. Required since the button renders only an icon with no visible text label.
variant	variant	"danger" | "primary" | "secondary"	'primary'	The visual style variant of the button, matching holo-button.

Slots

Slot	Description
(default)	The icon to display, typically an inline <svg>.

CSS custom properties

Property	Description
--holo-icon-button-padding	Inner padding around the icon.
--holo-icon-button-radius	Corner radius of the button.
--holo-icon-button-size	Width and height of the button.