Buttons

Default Styling

Button styling is automatically applied to any elements matching the following selectors:

• button
• [role='button']
• [type='button']
• [type='submit']
• [type='reset']
• .button

In order to use an a element as a button, use role="button" to convey their purpose to screen readers and other assistive technologies. If you want to apply button styling to an a element, but retain the semantics of the anchor tag, use the .button class instead.

Link as button Link with button styling

<button>Button</button>
<button type="button">Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<a role="button">Link as button</a>
<a class="button">Link with button styling</a>
<button type="button" disabled>Disabled</button>

You can also style any element like a button by using the button mixin, if you are using the HiQ source files with PostCSS.

However, ideally any non-button element would receive role="button" to accurately convey its function to browsers.

span {
  @mixin button;
}

Button styling can be customized through a number of custom properties targeted to each interaction state.

Property Name (global/local)	Description
--hiq-button-height --button-height	Sets the height for buttons and button-like elements.
--hiq-button-vertical-padding --button-vertical-padding	Sets the top and bottom padding for buttons.
--hiq-button-horizontal-padding --button-horizontal-padding	Sets the left and right padding for buttons.
--hiq-button-border-width --button-border-width	Sets the border width for buttons.
--hiq-button-border-radius --button-border-radius	Sets the border-radius for buttons.
--hiq-button-font-weight --button-font-weight	Sets the font weight for button text.
--hiq-button-border-color --button-border-color	Sets the border color for static state buttons.
--hiq-button-background-color --button-background-color	Sets the background color for static state buttons.
--hiq-button-text-color --button-text-color	Sets the text color for static state buttons.
--hiq-button-hover-border-color --button-hover-border-color	Sets the border color for hovered buttons.
--hiq-button-hover-background-color --button-hover-background-color	Sets the background color for hovered buttons.
--hiq-button-hover-text-color --button-hover-text-color	Sets the text color for hovered buttons.
--hiq-button-focus-border-color --button-focus-border-color	Sets the border color for focused buttons.
--hiq-button-focus-background-color --button-focus-background-color	Sets the background color for focused buttons.
--hiq-button-focus-text-color --button-focus-text-color	Sets the text color for focused buttons.
--hiq-button-active-border-color --button-active-border-color	Sets the border color for active buttons.
--hiq-button-active-background-color --button-active-background-color	Sets the background color for active buttons.
--hiq-button-active-text-color --button-active-text-color	Sets the text color for active buttons.

Customization

We recommend creating new button variants by using locally scoped custom properties within the variant scope.

button.is-primary {
  --button-border-color: blue;
  --button-background-color: blue;
  --button-text-color: white;
}