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.

Index

Constructors

• constructor

Properties

• styles
• color
• disabled
• role
• size
• tabindex

Constructors

ui.iconButton.HoopsIconButton.constructor()

HoopsIconButton(): HoopsIconButton

Returns: HoopsIconButton

Properties

ui.iconButton.HoopsIconButton.styles

static

styles: CSSResult[]

Array of styles to apply to the element. The styles should be defined using the ? tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

ui.iconButton.HoopsIconButton.color

color: (“default” | “accent”)

Color variant of the button.

ui.iconButton.HoopsIconButton.disabled

disabled: boolean

Whether the button is disabled and non-interactive.

ui.iconButton.HoopsIconButton.role

role: string

ARIA role for accessibility.

ui.iconButton.HoopsIconButton.size

size: string

Size variant of the button.

ui.iconButton.HoopsIconButton.tabindex

tabindex: string

Tab order index for keyboard navigation.