Holo Button
The <holo-button> component is a high-tech visual button designed for the Holocron 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.
Live Previews
Section titled “Live Previews”Primary Variant (default)
Section titled “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
Section titled “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
Section titled “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
Section titled “Danger Variant”The danger variant is used to flag critical or destructive operations.
<holo-button label="Danger Action" variant="danger"></holo-button>Disabled State
Section titled “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>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Type | Default | Description |
| ---------- | -------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------- |
| label | string | undefined | The text label to display inside the button. |
| variant | "primary" \| "secondary" \| "danger" | "primary" | The visual style style of the button. |
| glow | boolean | false | If true on the primary variant, layers the decorative holographic glow, dashed border, and shimmer scan on top. |
| disabled | boolean | false | If true, disables interaction and grays out component. |
| Slot Name | Description | | --------- | ------------------------------------------------------------------------- | | Default | Allows custom elements/text to be nested instead of/in addition to label. |
Events
Section titled “Events”This component relies on standard native pointer/keyboard events. You can attach standard click event listeners directly to the <holo-button> element.