
###############
HoopsIconButton
###############

.. js: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.
   
   .. rubric:: Examples
   
   
   .. code-block:: html
   
      <hoops-icon-button size="md" color="accent">
        <svg>...</svg>
      </hoops-icon-button>
   
   .. rubric:: Custom Element
   
   
   ``hoops-icon-button``
   
   .. rubric:: 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
   
   
   .. rubric:: Slots
   
   
   **- Default slot for icon content (typically SVG elements)**
   
   .. rubric:: 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
   
   
   .. rubric:: Since
   
   
   ``2025.7.0``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~ui.iconButton.HoopsIconButton.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~ui.iconButton.HoopsIconButton.color`
   * :js:data:`~ui.iconButton.HoopsIconButton.disabled`
   * :js:data:`~ui.iconButton.HoopsIconButton.role`
   * :js:data:`~ui.iconButton.HoopsIconButton.size`
   * :js:data:`~ui.iconButton.HoopsIconButton.tabindex`
   
   



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

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


.. js:method:: ui.iconButton.HoopsIconButton.constructor

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



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

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


.. js:data:: ui.iconButton.HoopsIconButton.color

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



.. js:data:: ui.iconButton.HoopsIconButton.disabled

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



.. js:data:: ui.iconButton.HoopsIconButton.role

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



.. js:data:: ui.iconButton.HoopsIconButton.size

      .. rst-class:: sig-pretty-signature
      
         | size: *string*
      
      Size variant of the button.
      
      .. rubric:: Default
      
      
      `````ts
      'md'
      `````
      



.. js:data:: ui.iconButton.HoopsIconButton.tabindex

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




