HexagonJS
Edit Page
Button
Provides the default font styles and header classes
Examples



HTML

<button class="hx-btn">hx-btn</button>
<button class="hx-btn hx-action">hx-action</button>
<button class="hx-btn hx-positive">hx-positive</button>
<button class="hx-btn hx-warning">hx-warning</button>
<button class="hx-btn hx-negative">hx-negative</button>
<button class="hx-btn hx-info">hx-info</button>
<br>
<button class="hx-btn hx-complement">hx-complement</button>
<button class="hx-btn hx-contrast">hx-contrast</button>
<button class="hx-btn hx-btn-invisible">hx-btn-invisible</button>
<br>
<button class="hx-btn hx-btn-outline">hx-btn</button>
<button class="hx-btn hx-btn-outline hx-action">hx-action</button>
<button class="hx-btn hx-btn-outline hx-positive">hx-positive</button>
<button class="hx-btn hx-btn-outline hx-warning">hx-warning</button>
<button class="hx-btn hx-btn-outline hx-negative">hx-negative</button>
<button class="hx-btn hx-btn-outline hx-info">hx-info</button>
<br>
<button class="hx-btn hx-btn-outline hx-complement">hx-complement</button>
<button class="hx-btn hx-btn-outline hx-contrast">hx-contrast</button>
<button class="hx-btn hx-btn-outline hx-btn-invisible">hx-btn-invisible</button>

HTML

<button id="button-example" class="hx-btn hx-positive">
  <i class="fa fa-check"></i> Click Me
</button>

JavaScript

hx.select('#button-example').on('click', function(){
  hx.notify.info('Button clicked');
});
Api
Classes
hx-btn
Applies styling to <button> and <a> elements.
Extra Classes
hx-btn-invertdeprecated
Deprecated
Renamed to hx-btn-outline
Gives the button an inverted style, so that the text is colored rather than the background.
hx-action
Adds button styling indicative of a primary action
hx-btn-invisible
Removes all styles so that only the text can be seen.
hx-btn-outline
Removes the background colour from the button and colours the text and outline.
hx-complement
Styles the button with a color that complements the theme (light for a light theme, dark for a dark theme)
hx-contrast
Styles the button with a contrasting color to the theme
hx-disabled
Gives the button the style of a disabled button.
hx-info
Styles the button to indicate that clicking it will lead to some form of documentation / information.
hx-negative
Adds button styling indicative of failure, danger or something negative
hx-positive
Adds button styling indicative of success, confirmation or something positive
hx-warning
Adds button styling indicative of warning, to suggest the user should use caution