HoopsIconButton

class ui.iconButton.HoopsIconButton()

A circular icon button component with customizable size, color, and accessibility features.

Provides a clickable button specifically designed for displaying icons with proper keyboard navigation, hover effects, and disabled states.

Examples

<hoops-icon-button size="md" color="accent">
  <svg>...</svg>
</hoops-icon-button>

Custom Element

hoops-icon-button

Attributes

tabindex

Tab order index for keyboard navigation

role

ARIA role for accessibility

size

Size variant of the button

color

Color variant of the button

disabled

Whether the button is disabled

Slots

- Default slot for icon content (typically SVG elements)

CSS Properties

–hoops-neutral-foreground

Default icon color

–hoops-accent-foreground

Icon color when using accent variant

–hoops-neutral-foreground-active

Icon color when button is hovered/focused/active

–hoops-accent-foreground-active

Accent icon 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-size

Size of extra large button container

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

Size of extra large button content

–hoops-md-icon-button-size

Size of medium button container

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

Size of medium button content

–hoops-sm-icon-button-size

Size of small button container

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

Size of small button content

Since

2025.7.0

Index

Constructors

• constructor

Properties

• color
• disabled
• role
• size
• tabindex

Constructors

ui.iconButton.HoopsIconButton.constructor()

HoopsIconButton(): HoopsIconButton

Returns: HoopsIconButton

Properties

ui.iconButton.HoopsIconButton.color

color: (“default” | “accent”)

Color variant of the button.

Default

```ts 'default' ```

ui.iconButton.HoopsIconButton.disabled

disabled: boolean

Whether the button is disabled and non-interactive.

Default

```ts false ```

ui.iconButton.HoopsIconButton.role

role: string

ARIA role for accessibility.

Default

```ts 'button' ```

ui.iconButton.HoopsIconButton.size

size: string

Size variant of the button.

Default

```ts 'md' ```

ui.iconButton.HoopsIconButton.tabindex

tabindex: string

Tab order index for keyboard navigation.

Default

```ts '0' ```