Button
A standard button is typically used to bring the users attention to key interactions on the page.
They should be labelled accordingly and given a correct prominancy relative to their importance as a call to action.
Source
Contributors
Mixes
- Overview
- Methods
- Theming
Table of contents
Base
Modifiers
States
Base
Standard
The standard button typically has the main brand colour as its background colour to maximize its prominance.
Icon
You can embed an icon into the button with the c-button__icon element. If the icon is an inline SVG (Which it probably should be) then its fill will automatically change to match the text.
The c-button__icon--left and c-button__icon--right modifier can also be applied to add appropriate margins between text and icon.
You can also tweak the sizing of the icon with various modifiers to c-button__icon. These are c-button__icon--micro, c-button__icon--small, c-button__icon--large and c-button__icon--huge.
Cover
The cover element allows you to overlay content over a button, without interferring with the original size or content of the button. One use case could be to temporarily replace button text with an icon.
Button Group
By placing buttons containing radio inputs inside of a c-button-group component, you can create a group of buttons which can function as toggles. You can hook into these by creating event listeners to watch for the button groups's change event.
In addition to applying modifiers directly to buttons, small, large, border, invert and secondary modifiers can be applied to all buttons within a group like so: c-button-group--secondary etc.
Whilst the tabs component is based around showing and hiding content, the button group is best suited to functionality, such as toggling options or settings.
Modifiers
A list of modifiers for the button component, allowing you to change its appearance to fit a variety of roles and scenarios.
Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.
Sizes
There are size variants available to adapt a button to different roles.
The large variant of the button should be used to give maximum prominance to a call to action. Typically you would use these high up a page, in a header or banner of some kind.
The small variant of the button should be used for an item of low priority, typically call to actions which serve a more functional purpose than a marketing one.
Secondary
Use the secondary modifier when a button needs prominance, but not as much as afforded by a standard button.
You could also use this modifier to create a hierachy of prominance in a group of buttons. In this case, your main CTA being a standard button, and the other being a secondary button.
Invert
We can add the invert modifier if the button needs to be used on darker backgrounds.
Border
Adds a white border around the button. This would primarily be used in scenarios where a button needs to be displayed on a dark background, but the invert modifier isn't suitable.
Slim
A simple modifier which removes horizontal padding. Best used when only an icon is featured within the button, which makes it square.
States
This button component has multiple states available. These can also be combined with any combination of modifiers, unless stated otherwise.
Most states are also activated when a parent component has the same state applied. For example, if a fieldset element is disabled or has an is-disabled class, this will also activate the disabled state for all its child components with states available.
This behaviour can be disabled by adding a --disable-state-inheritance modifier class to the element inheriting the state (For example, for c-button, the class would be c-button--disable-state-inheritance).
Loading
Introduces a modifier to the c-button__cover element to create a loading state for the button. This is triggered by adding is-loading to the block element. A typical use case would be to display the loading state whilst an async call is being made, followed by a state change to is-positive or is-negative.
Positive
Used to convey that some criteria has been met, usually related to the content which the button is associated with, like a form with all of its required fields being completed.
Caution
Used to convey that something may be wrong, but not an outright error.
Negative
Used to convey that there's an error, usually with the content which the button is associated with, like a form.
Neutral
Not particular tied to any particular error. More a general purpose state.
Disabled
Used to convey to the user that if clicked, nothing will happen.
This component has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector.
See JavaScript API for more information and a list of shared, global methods.
toggle
Selects a button within a button group.
// You can pass DOM references
const myButtonGroup = document.querySelector('.js-my-button-group');
const buttonToToggle = myTabs.querySelector('.js-my-chosen-button');
evo(myButtonGroup).tabs('toggle', {
button: buttonToToggle
})
// Or String selectors
evo('.js-my-button-group').tabs('toggle', {
button: '.js-my-chosen-button'
})
// Or by 'name' attribute of the checkbox within the button
evo('.js-my-button-group').tabs('toggle', {
button: '[name="my-button-checkbox"]'
})
// Or by button number. This would open the first button.
evo('.js-my-button-group').tabs('toggle', {
button: 1
})
You can theme the button component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.
Below is a list of theme variables and their default values.
Theme Variables
| Theme Variables | Default |
|---|---|
$component-button-color |
primary |
$component-button-border-color |
white |