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.
The standard button typically has the main brand colour as its background colour to maximize its prominance.
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.
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
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.
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
In addition to applying modifiers directly to buttons,
secondary modifiers can be applied to all buttons within a group like so:
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.
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.
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.
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.
We can add the invert modifier if the button needs to be used on darker backgrounds.
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.
A simple modifier which removes horizontal padding. Best used when only an icon is featured within the button, which makes it square.
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
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
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.
Used to convey that something may be wrong, but not an outright error.
Used to convey that there's an error, usually with the content which the button is associated with, like a form.
Not particular tied to any particular error. More a general purpose state.
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
Selects a button within a button group.
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.