HoopsButton

class ui.button.HoopsButton()

A customizable button component with icon support and multiple styling options.

Provides a flexible button implementation with configurable colors, sizes, and accessibility features. Supports keyboard navigation and can be disabled when needed.

Examples

<hoops-button color="accent" iconSize="md">
  <svg slot="icon">...</svg>
  Click me
</hoops-button>

Custom Element

hoops-button

Attributes

tabindex

Tab order index for keyboard navigation

role

ARIA role for accessibility

iconSize

Size of the icon (xl, md, sm)

color

Color variant of the button

disabled

Whether the button is disabled

Slots

icon

Icon content to display before the button text

- Default slot for button text content

CSS Properties

–hoops-neutral-foreground

Default text color for the button

–hoops-accent-foreground

Text color when using accent color variant

–hoops-neutral-foreground-active

Text color when button is hovered/focused/active

–hoops-accent-foreground-active

Accent text color when button is hovered/focused/active

–hoops-neutral-background-hover

Background color on hover/focus/active states

–hoops-svg-stroke-color

Stroke color for SVG icons in accent mode

–hoops-xl-icon-button-content-size

Size for extra large icons

–hoops-md-icon-button-content-size

Size for medium icons

–hoops-sm-icon-button-content-size

Size for small icons

Since

2025.7.0

Index

Constructors

Properties

Constructors

ui.button.HoopsButton.constructor()
HoopsButton(): HoopsButton

Returns: HoopsButton

Properties

ui.button.HoopsButton.color
color: (“default” | “accent”)

Color variant of the button.

Default

```ts 'default' ```

ui.button.HoopsButton.disabled
disabled: boolean

Whether the button is disabled and non-interactive.

Default

```ts false ```

ui.button.HoopsButton.iconSize
iconSize: string

Size of the icon displayed in the button.

Default

```ts 'md' ```

ui.button.HoopsButton.role
role: string

ARIA role for accessibility.

Default

```ts 'button' ```

ui.button.HoopsButton.tabindex
tabindex: string

Tab order index for keyboard navigation.

Default

```ts '0' ```