EvoToolkit - v2.3.0 (Changelog)

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

Luke Harrison

Mixes
A mix is a new component variant created using another. Listed below are mixes in other components involving the button.

Dependents
This part is required by one or more components to display properly. If the dependent is enabled and this isn't, it will automatically be imported.

  • Overview
  • Methods
  • Theming

Base

Standard

The standard button typically has the main brand colour as its background colour to maximize its prominance.

<button class='c-button'>My Button</button>

IconDisabled

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.

These button icon modifiers are disabled by default. Alignment modifiers are controlled by $component-button-icon-alignment-modifiers, whilst size modifiers are controlled by component-button-icon-size-modifiers.

Enable these block variables or add classes to filters in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally.

<!-- Standard --> <button class='c-button u-margin-bottom-small'> My Button <svg class='c-button__icon c-button__icon--right'><use xlink:href="#test-icon" /></svg> </button> <!-- Larger Icon --> <button class='c-button u-margin-bottom-small'> My Button <svg class='c-button__icon c-button__icon--right c-button__icon--large'><use xlink:href="#test-icon" /></svg> </button> <!-- Smaller Icon --> <button class='c-button u-margin-bottom-small'> My Button <svg class='c-button__icon c-button__icon--right c-button__icon--small'><use xlink:href="#test-icon" /></svg> </button> <!-- Use in combination with other modifiers --> <button class='c-button c-button--secondary'> <svg class='c-button__icon c-button__icon--left'><use xlink:href="#test-icon" /></svg> My Button </button>

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 class="c-button"> My Button <div class='o-cover c-button__cover'> <svg class="c-button__icon c-button__icon--large"><use xlink:href="#test-icon"></use></svg> </div> </button>

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.

<div class="c-button-group u-margin-bottom-regular"> <label class="c-button" tabindex="0"> <input type="radio" name="option1078" value="1"> Option </label> <label class="c-button" tabindex="0"> <input type="radio" name="option1078" value="2" checked> Option </label> <label class="c-button" tabindex="0"> <input type="radio" name="option1078" value="3"> Option </label> </div> <div class="c-button-group c-button-group--small c-button-group--secondary u-margin-bottom-regular"> <label class="c-button" tabindex="0"> <input type="radio" name="option4089" value="1"> Option </label> <label class="c-button" tabindex="0"> <input type="radio" name="option4089" checked value="2"> Option </label> <label class="c-button" tabindex="0"> <input type="radio" name="option4089" value="3"> Option </label> </div> <div class="c-button-group"> <label class="c-button c-button--secondary" tabindex="0"> <input type="radio" name="option9270" value="1"> Option </label> <label class="c-button" tabindex="0"> <input type="radio" name="option9270" checked> Option </label> <label class="c-button c-button--slim" tabindex="0"> <input type="radio" name="option9270" value="3"> <svg class='c-button__icon c-button__icon--large'><use xlink:href="#test-icon" /></svg> </label> </div>

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.

SizesDisabled

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.

This is disabled by default. Enable block variable $component-button-size-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<button class='c-button c-button--large u-margin-bottom-small'>Large Button</button> <button class='c-button u-margin-bottom-small'>Regular Button</button> <button class='c-button c-button--small u-margin-bottom-small'>Small Button</button> <button class='c-button c-button--tiny'>Tiny Button</button>

SecondaryDisabled

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.

This is disabled by default. Enable block variable $component-button-secondary-modifier or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<button class='c-button c-button--secondary u-margin-bottom-regular'>My Button</button>

InvertDisabled

We can add the invert modifier if the button needs to be used on darker backgrounds.

This is disabled by default. Enable block variable $component-button-invert-modifier or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<button class='c-button c-button--invert u-margin-bottom-small'>My Button</button> <button class='c-button c-button--secondary c-button--invert'>My Button</button>

BorderDisabled

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.

This is disabled by default. Enable block variable $component-button-border-modifier or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<button class='c-button c-button--border'>My Button</button>

SlimDisabled

A simple modifier which removes horizontal padding. Best used when only an icon is featured within the button, which makes it square.

This is disabled by default. Enable block variable $component-button-slim-modifier or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<button class='c-button c-button--slim c-button--small u-margin-bottom-small'> <svg class='c-button__icon'><use xlink:href="#test-icon" /></svg> </button> <button class='c-button c-button--slim u-margin-bottom-small'> <svg class='c-button__icon'><use xlink:href="#test-icon" /></svg> </button> <button class='c-button c-button--slim c-button--large'> <svg class='c-button__icon c-button__icon--large'><use xlink:href="#test-icon" /></svg> </button>

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.

<button class="c-button is-loading"> My Button <div class='o-cover c-button__cover c-button__cover--loader'> <svg class="c-button__icon c-button__icon--huge"><use xlink:href="#loading"></use></svg> </div> </button>

This state requires an icon, so copy the below symbol into your root svg element If using EvoToolkit boilerplate, this is the empty <svg> just after the opening <body>. . You can also download the SVG directly for use in design apps.

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.

<button class='c-button is-positive u-margin-bottom-small'>My Button</button> <button class='c-button c-button--secondary is-positive'>My Button</button>

Caution

Used to convey that something may be wrong, but not an outright error.

<button class='c-button is-caution u-margin-bottom-small'>My Button</button> <button class='c-button c-button--secondary is-caution'>My Button</button>

Negative

Used to convey that there's an error, usually with the content which the button is associated with, like a form.

<button class='c-button is-negative u-margin-bottom-small'>My Button</button> <button class='c-button c-button--secondary is-negative'>My Button</button>

Neutral

Not particular tied to any particular error. More a general purpose state.

<button class='c-button is-info u-margin-bottom-small'>My Button</button> <button class='c-button c-button--secondary is-info'>My Button</button>

Disabled

Used to convey to the user that if clicked, nothing will happen.

<button class='c-button is-disabled'>My Button</button>

This component has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector. See JavaScript API for more info.

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