Button

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

Secondary

Default

Positive

Negative

Allowed in modals

Default

Positive

Default

Negative

Not allowed

Primary

Secondary

Default

Primary

Secondary

Negative

Default

Positive

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

Change Log

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

hx-flag-button

Styles a button (or buttons inside a container) using the updated button styles.

Can be applied directly to a hx-btn as well as a container with buttons inside