Holo Button

The <holo-button> component is a high-tech visual button designed for the Hololink UI system. It supports multiple variants, interactive hover/active states, and a disabled state. The primary variant is clean and flat by default, with an optional holographic glow treatment that can be enabled explicitly.

When to use

Use it for:

Triggering an action on the current page: submit, save, open a dialog, delete.
Distinguishing a primary action (primary), a supporting action (secondary) and a destructive one (danger).

Don’t use it for:

Navigating to another page or URL. Use Link.
Icon-only controls. Use Icon Button, which requires an accessible name.
Toggling a setting on or off. Use Switch or Checkbox.

Live Previews

Primary Variant (default)

The primary variant is a clean, flat interactive button using the system’s interactive surface colors. It stays minimal unless the glow prop is enabled.

<holo-button label="Primary Action" variant="primary"></holo-button>

Primary Variant with Glow

A decorative holographic enhancement can be layered onto the primary variant by setting the glow prop. This adds the dashed-border, holographic glow, and scanning shimmer treatment.

<holo-button label="Primary Glow" variant="primary" glow></holo-button>

Secondary Variant

The secondary variant is a clean visual representation suited for secondary choices.

<holo-button label="Secondary Action" variant="secondary"></holo-button>

Danger Variant

The danger variant is used to flag critical or destructive operations.

<holo-button label="Danger Action" variant="danger"></holo-button>

Disabled State

All variants support the standard disabled attribute, which stops hover effects and interaction.

<holo-button label="Disabled Action" variant="primary" disabled></holo-button>

Accessibility

The component renders a native <button type="button"> inside its shadow root, so it keeps native semantics, focus and activation. The accessible name is the label prop plus any slotted content. When disabled, the inner button is natively disabled (removed from the tab order and not activatable) 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 inner button is type="button", so it does not submit a surrounding form by itself. Handle click in your code.
The glow treatment is decorative and does not change semantics.

You provide:

A label (or slotted text) that describes the action (“Save changes”, not “Click here”).
Wording that makes a danger action clear. Do not rely on colour alone.

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-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 text label to display inside the button.
`variant`	`variant`	`"danger" \| "primary" \| "secondary"`	`'primary'`	The visual style variant of the button. - "primary": Clean interactive variant with a flat, solid fill and clear hover feedback. - "secondary": Clean surface/outline variant. - "danger": Warning/critical action variant.

Slots

Slot	Description
(default)	Custom content rendered after the `label` text (or instead of it), such as an icon.