Button v0.1.6+ HelixUI v0.1.6 or later required

Buttons enable users to trigger actions on the current page.

Basic Button

Define a basic button by adding the .hxBtn CSS class to any supported element.

Supported elements are as follows:

<button>
<a href="...">
<input type="button">
<input type="reset">
<input type="submit">

<!-- text-only (no span necessary) -->
<button class="{{classes}}">
  Press Me
</button>

<!-- text + non-text (span around text required) -->
<button class="{{classes}}" disabled>
  <span>Loading</span>
  <hx-busy></hx-busy>
</button>

<!-- non-text + text (span around text required) -->
<a href="#" class="{{classes}}">
  <hx-icon type="download"></hx-icon>
  <span>Download</span>
</a>

Button Bar

A button bar is built by placing several buttons within a <div> element having the .hxButtonBar CSS class.

<div class="{{classes}}">
  <button class="hxBtn">First</button>
  <button class="hxBtn">Second</button>
  <button class="hxBtn">
    <hx-icon type="angle-down"></hx-icon>
  </button>
</div>

Size and Weight classes are applied to the entire bar, not to individual buttons.

Button Set

<div class="hxButtonSet">
  <button class="hxBtn hxPrimary">
    Primary Button
  </button>

  <button class="hxBtn">
    Secondary Button
  </button>

  <button class="hxBtn hxTertiary">
    Tertiary Button
  </button>
</div>

Deprecated Markup - Basic Button

Tertiary Button zero padding styles are deprecated as of HelixUI-v0.21.0 release. If needed for backward compatibility, please add the class hxDeprecated to your Tertiary Button markup.

Download

<!-- text-only (no span necessary) -->
<button class="{{classes}}">
  Press Me
</button>

<!-- text + non-text (span around text required) -->
<button class="{{classes}}" disabled>
  <span>Loading</span>
  <hx-busy></hx-busy>
</button>

<!-- non-text + text (span around text required) -->
<a href="#" class="{{classes}}">
  <hx-icon type="download"></hx-icon>
  <span>Download</span>
</a>

Deprecated Markup - Button Bar

Tertiary Button zero padding styles are deprecated as of HelixUI-v0.21.0 release. If needed for backward compatibility, please add the class hxDeprecated to your Tertiary Button markup.

<div class="{{classes}}">
  <button class="hxBtn">First</button>
  <button class="hxBtn">Second</button>
  <button class="hxBtn">
    <hx-icon type="angle-down"></hx-icon>
  </button>
</div>

Size and Tertiary classes are applied to the entire bar, not to individual buttons.

See Also