Button ​

Click me baby one more time

Usage ​

<template>
  <HButton>Button</HButton>
</template>

Accessibility ​

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).

<template>
  <!-- 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>
</template>

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

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

Customization ​

Styling ​

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);
}

Props ​

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