Skip to content
On this page


Click me baby one more time




Out of the box

The button's height and width have a minimum of 44px so the target size is large enough for a user to easily tap with a finger or click with a mouse (See Target Size).

When the button is disabled, the aria-disabled attribute is set to true along with the disabled attribute (See aria-disabled).

Custom Options

If the button does not contain text, provide an accessible label via the aria-label or aria-labelledby attributes (See aria-label and aria-labelledby).

  <!-- Describe with aria-label -->
  <HButton aria-label="Close"></HButton>

  <!-- Describe with aria-description -->
  <span id="close-button-label">Close</span>
  <HButton aria-labelledby="close-button-label"></HButton>

If there is a text description of the button, use the aria-describedby attribute to associate the description with the button (See aria-describedby).

  <HButton aria-describedby="recycle-button-description">
    Move to recycle bin
  <span id="recycle-button-description">
    Items in the recycle bin will be permanently removed after 30 days.
Items in the recycle bin will be permanently removed after 30 days.



To customize the button's appearance, you may override the styles on the hyah-button class, or apply your own values to the CSS variables below:

:root {
  --hya-btn-min-ht: 44px;
  --hya-btn-min-wd: 44px;
  --hya-btn-wd: fit-content;
  --hya-btn-c-bg: var(--hya-c-primary);
  --hyah-btn-pd: 0 16px;
  --hyah-btn-c-font: var(--hya-c-font);


Any additional attributes provided will be applied to the button (or a) element directly, such as aria-label, aria-labelledby, target, etc.

typeThe type of button. (button, submit, reset)string"button"
disabledIf true, the button is disabled (also sets aria-disabled to true).boolfalse
fullWidthIf true, the button will take up the full width of its container.boolfalse
hrefThe URL to link to when the button is clicked (element becomes an a).string