.. role:: clio-static
   :class: clio-flag clio-flag-static


###############
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.
   
   
   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.styles`
   * :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.styles

      .. rst-class:: clio-flags
      
         :clio-static:`static`
      
      .. rst-class:: sig-pretty-signature
      
         | 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:
      
      .. code-block:: html
      
         <script>
           // Generated and unique per request:
           window.litNonce = 'a1b2c3d4';
         </script>
      



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

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



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

      .. rst-class:: sig-pretty-signature
      
         | disabled: *boolean*
      
      Whether the button is disabled and non-interactive.
      



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

      .. rst-class:: sig-pretty-signature
      
         | role: *string*
      
      ARIA role for accessibility.
      



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

      .. rst-class:: sig-pretty-signature
      
         | size: *string*
      
      Size variant of the button.
      



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

      .. rst-class:: sig-pretty-signature
      
         | tabindex: *string*
      
      Tab order index for keyboard navigation.
      




