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">


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

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

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

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.

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

See Also