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
Link
<button class="{{classes}}">Button</button>
<a href="#" class="{{classes}}">Link</a>
<input type="button" class="{{classes}}" value="Input" />
<input type="submit" class="{{classes}}" value="Submit" />
<input type="reset" class="{{classes}}" value="Reset" />

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