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.
Live Previews
Section titled “Live Previews”Primary Variant (default)
Section titled “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
Section titled “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>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ----------- |
| label | label | The accessible name for the button. Required. | string | undefined |
| variant | variant | The visual style variant, matching holo-button. | "primary" \| "secondary" \| "danger" | "primary" |
| glow | glow | If true on the primary variant, layers the decorative holographic glow, dashed border, and shimmer scan on top. | boolean | false |
| disabled | disabled | If true, the button is disabled and non-interactive. | boolean | false |
| Slot Name | Description |
| --------- | ---------------------------------------- |
| (default) | The icon element (typically an <svg>). |