HoopsColorButtonElement

class ui.common.HoopsColorButtonElement()

A custom web component that provides a color picker button interface.

This component combines a visual button with a hidden HTML color input, allowing users to select colors through the native color picker while maintaining a custom button appearance. The button’s stroke color is dynamically updated to reflect the selected color.

Index

Constructors

Properties

Constructors

ui.common.HoopsColorButtonElement.constructor()
HoopsColorButtonElement(): HoopsColorButtonElement

Constructs a new HoopsColorButtonElement with default values.

Initializes the component with:

  • Empty title
  • White color value (“#ffffff”)
  • Disabled state set to false

Returns: HoopsColorButtonElement

Properties

ui.common.HoopsColorButtonElement.color
color: (“default” | “accent”)

The visual style variant of the button. Determines the button’s appearance and color scheme.

  • “default”: Standard button appearance
  • “accent”: Emphasized button with accent styling
ui.common.HoopsColorButtonElement.disabled
disabled: boolean

Whether the color button is disabled and non-interactive. When disabled, the button cannot be clicked and the color picker is not accessible. The button will also show disabled styling.

ui.common.HoopsColorButtonElement.iconSize
iconSize: string

The size of the icon displayed within the button. Controls the dimensions of any slotted icon content.

ui.common.HoopsColorButtonElement.role
role: string

The ARIA role for accessibility. Identifies the element as a button for screen readers and other assistive technologies. Set to “button” by default.

ui.common.HoopsColorButtonElement.tabindex
tabindex: string

The tab index for keyboard navigation accessibility. Controls the order in which the element receives focus when navigating with the Tab key. Set to “0” by default to include in normal tab order.

ui.common.HoopsColorButtonElement.title
title: string

The tooltip text displayed when hovering over the color button. This should provide context about what the color selection is for.

ui.common.HoopsColorButtonElement.value
value: string

The current selected color value in hexadecimal format (e.g., “#ff0000”). This value is used to set the initial color picker state and is updated when the user selects a new color. The value also affects the button’s stroke color via CSS custom properties.