Skip to main content

Buttons 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 of the following elements:

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

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>

Text nodes within buttons must be wrapped in a <span>, if non-text siblings are present.

Button Group

A button group is built by placing several buttons within a <div> element having the .hxBtnGroup CSS class. Button variant classes are added to the wrapper instead of the individual buttons to apply the same style to all buttons in the group.

Variant
Size
<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>

See Also