HexagonJS
Edit Page
Button
Provides the default font styles and header classes
Using Buttons
Version 2.x
In version 2 of Hexagon, the user experience and interface are being overhauled to add guidelines and improve the general usability of the library.
This module has had several new classes added for hx-btn elements that apply new styles. The standard hx-btn class can be used with hx-flag-button to apply the new styles to default buttons.
Alternatively, this class can be applied to the body to make all buttons on the page use the new styles.
The guidelines below use the version 2 styles.
Button Sizes
There are 3 button sizes. Normal, Small and Micro
By default you should use the Normal size button. The other button types are useful when there is limited vertical space available
Button Types
There are four main kinds of buttons for use throughout an app, Primary, Secondary, Standard and Link
Use the Primary button when there is an action that’s more important than other ones on the page, and you want to draw the user’s attention towards it. You can have one Primary button per screen (excluding modal dialogs). But sometimes you shouldn’t use a Primary button at all, e.g. when all the actions on the page are very rarely used, or when all the actions are of equal importance.
The Secondary button can be used inside forms to allow actions to be performed on form fields. The secondary button should be paired with a form field. And the functionality of the secondary button should be related to the form field it’s paired with. Like the Primary button, the Secondary button is optional - only use it if a form requires it.
Use the Standard button when the action isn’t more important than the rest on the page, or if all the actions are of equal importance. There’s no limit on how many Standard buttons you can use on a page, but we recommend that you use a Dropdown button or More button if there are many actions to perform on the page.
Use the Link button when the action is relatively unimportant, and a normal button would create too much visual noise on the page. E.g. resetting fields in a search form; hiding or opening a UI panel. The text in the link button should all be uppercase.
There are also two buttons for positive/negative actions. Use the green Success button when you have an action that has a positive meaning, like ‘approve’, or ‘confirm’. Use the red Danger button when you have an action with a negative meaning, like ‘reject’ or ‘delete’. If your action is commonplace or is neutral in meaning, like ‘save’ or ‘send’, then you don’t have to use either of these buttons.
When you have a pair of actions that are opposite to each other, like ‘Approve’ and ‘Reject’ or ‘Buy’ and ‘Sell’, you can use the Success and Danger buttons next to each other.
Use a Disabled button using the disabled attribute to show that a functionality exists but isn’t currently available.
Using icons in buttons is not recommended as they usually don't add much contextually and the text on the button should be explicit enough that an icon is not required.
Grouping buttons
When buttons are positioned near each other, they form a button group. Within a button group you can have a maximum of one Primary button. The rest of the buttons should only be Default buttons. Please note that the Primary button is not mandatory in a button group. It’s ok to have a button group composed of only Default buttons.

Allowed

Primary
Default
Default
Default
Secondary
Default
Default
Default
Default
Default
Default
Default
Positive
Negative

Allowed in modals

Default
Positive
Default
Negative

Not allowed

Primary
Secondary
Default
Default
Primary
Primary
Secondary
Secondary
Negative
Default
Default
Default
Positive
Default
Default
Default
Examples


HTML

<button class="hx-btn hx-primary">primary</button>
<button class="hx-btn hx-secondary">secondary</button>
<button class="hx-btn hx-btn-normal">standard</button>
<button class="hx-btn hx-success">success</button>
<button class="hx-btn hx-danger">danger</button>
<button disabled class="hx-btn hx-btn-normal">disabled attr</button>
<button class="hx-btn hx-btn-link">link</button>
<br>
<br>
<button class="hx-margin-left hx-btn hx-btn-normal">normal</button>
<button class="hx-margin-left hx-btn hx-btn-small">small</button>
<button class="hx-margin-left hx-btn hx-btn-micro">micro</button>

HTML

<button id="button-example" class="hx-btn hx-primary">Click Me</button>

JavaScript

hx.select('#button-example').on('click', function(){
  hx.notify.info('Button clicked');
});

1.x (deprecated) Buttons




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>
Api
Classes
hx-btn
Applies styling to <button> and <a> elements.
Extra Classes
hx-actiondeprecated
Deprecated
The context classes for buttons have been updated to help improve UX considerations. This context has been replaced by hx-primary
Adds button styling indicative of a primary action
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-btn-invisibledeprecated
Deprecated
This class has been updated to hx-btn-link. This retains the spacing and styles the text as a link.
Removes all styles so that only the text can be seen.
hx-btn-outlinedeprecated
Deprecated
The context classes for buttons have been updated to help improve UX considerations. Outline/inverted buttons have been removed as they can cause confusion.
Removes the background colour from the button and colours the text and outline.
hx-complementdeprecated
Deprecated
The context classes for buttons have been updated to help improve UX considerations. This class will be removed in the next major release.
Styles the button with a color that complements the theme (light for a light theme, dark for a dark theme)
hx-contrastdeprecated
Deprecated
The context classes for buttons have been updated to help improve UX considerations. This class will be removed in the next major release.
Styles the button with a contrasting color to the theme
hx-disableddeprecated
Deprecated
This class has been deprecated in favour of adding the disabled attribute to the button to prevent user interaction.
Gives the button the style of a disabled button.
hx-infodeprecated
Deprecated
The context classes for buttons have been updated to help improve UX considerations. This class will be removed in the next major release.
Styles the button to indicate that clicking it will lead to some form of documentation / information.
hx-negativedeprecated
Deprecated
The context classes for buttons have been updated to help improve UX considerations. This class has been replaced by hx-danger
Adds button styling indicative of failure, danger or something negative
hx-positivedeprecated
Deprecated
The context classes for buttons have been updated to help improve UX considerations. This class has been replaced by hx-success
Adds button styling indicative of success, confirmation or something positive
hx-warningdeprecated
Deprecated
The context classes for buttons have been updated to help improve UX considerations. This class will be removed in the next major release.
Adds button styling indicative of warning, to suggest the user should use caution
hx-btn-link
Display a button with the style of a link but the spacing of a button to help align it with other elements and improve the hit area for touch devices.
hx-btn-micro
The smallest type of button available. Use when there isn't enough space to fit a small or normal button.
hx-btn-normal
The default button size. Useful for being explicit about button size.
hx-btn-small
A small button. Use when there isn't enough space to fit a normal button.
hx-danger
A button for use when you have an action with a negative meaning, like ‘reject’ or ‘delete’.
hx-primary
A button for use when there is an action that’s more important than other ones on the page, and you want to draw the user’s attention towards it.
You can have one Primary button per screen (excluding modal dialogs).
But sometimes you shouldn’t use a Primary button at all, e.g. when all the actions on the page are very rarely used, or when all the actions are of equal importance.
hx-secondary
A button for use inside forms to allow actions to be performed on form fields.
The secondary button should be paired with a form field. And the functionality of the secondary button should be related to the form field it’s paired with.
Like the Primary button, the Secondary button is optional - only use it if a form requires it.
hx-success
A button for use when you have an action that has a positive meaning, like ‘approve’, or ‘confirm’.