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

<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