
###########
HoopsButton
###########

.. js: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.
   
   .. rubric:: Examples
   
   
   .. code-block:: html
   
      <hoops-button color="accent" iconSize="md">
        <svg slot="icon">...</svg>
        Click me
      </hoops-button>
   
   .. rubric:: Custom Element
   
   
   ``hoops-button``
   
   .. rubric:: 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
   
   
   .. rubric:: Slots
   
   
   **icon**
   
   
      Icon content to display before the button text
   
   
   **- Default slot for button text content**
   
   .. rubric:: 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
   
   
   .. rubric:: Since
   
   
   ``2025.7.0``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~ui.button.HoopsButton.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~ui.button.HoopsButton.color`
   * :js:data:`~ui.button.HoopsButton.disabled`
   * :js:data:`~ui.button.HoopsButton.iconSize`
   * :js:data:`~ui.button.HoopsButton.role`
   * :js:data:`~ui.button.HoopsButton.tabindex`
   
   



.. rst-class:: kind-group kind-constructors

.. rubric:: Constructors
   :class: kind-group-title


.. js:method:: ui.button.HoopsButton.constructor

      .. rst-class:: sig-pretty-signature
      
         | HoopsButton(): :js:class:`HoopsButton <ui.button.HoopsButton>`
      
      **Returns**\ : :js:class:`HoopsButton <ui.button.HoopsButton>`
      



.. rst-class:: kind-group kind-properties

.. rubric:: Properties
   :class: kind-group-title


.. js:data:: ui.button.HoopsButton.color

      .. rst-class:: sig-pretty-signature
      
         | color: (*"default"* | *"accent"*\ )
      
      Color variant of the button.
      
      .. rubric:: Default
      
      
      `````ts
      'default'
      `````
      



.. js:data:: ui.button.HoopsButton.disabled

      .. rst-class:: sig-pretty-signature
      
         | disabled: *boolean*
      
      Whether the button is disabled and non-interactive.
      
      .. rubric:: Default
      
      
      `````ts
      false
      `````
      



.. js:data:: ui.button.HoopsButton.iconSize

      .. rst-class:: sig-pretty-signature
      
         | iconSize: *string*
      
      Size of the icon displayed in the button.
      
      .. rubric:: Default
      
      
      `````ts
      'md'
      `````
      



.. js:data:: ui.button.HoopsButton.role

      .. rst-class:: sig-pretty-signature
      
         | role: *string*
      
      ARIA role for accessibility.
      
      .. rubric:: Default
      
      
      `````ts
      'button'
      `````
      



.. js:data:: ui.button.HoopsButton.tabindex

      .. rst-class:: sig-pretty-signature
      
         | tabindex: *string*
      
      Tab order index for keyboard navigation.
      
      .. rubric:: Default
      
      
      `````ts
      '0'
      `````
      




