EvoToolkit - v3.0.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.

  • Overview
  • Methods
  • Theming

Table of contents

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>

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.

<!-- Standard --> <button class='c-button u-mb-small'> My Button <svg class='c-button__icon c-button__icon--right'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon" /></svg> </button> <!-- Larger Icon --> <button class='c-button u-mb-small'> My Button <svg class='c-button__icon c-button__icon--right c-button__icon--large'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon" /></svg> </button> <!-- Smaller Icon --> <button class='c-button u-mb-small'> My Button <svg class='c-button__icon c-button__icon--right c-button__icon--small'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#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="/static/img/evotoolkit-a9f6d11dc7.svg#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="/static/img/evotoolkit-a9f6d11dc7.svg#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-mb-regular"> <label class="c-button" tabindex="0"> <input type="radio" name="option8854" value="1"> Option </label> <label class="c-button" tabindex="0"> <input type="radio" name="option8854" value="2" checked> Option </label> <label class="c-button" tabindex="0"> <input type="radio" name="option8854" value="3"> Option </label> </div> <div class="c-button-group c-button-group--small c-button-group--secondary u-mb-regular"> <label class="c-button" tabindex="0"> <input type="radio" name="option326" value="1"> Option </label> <label class="c-button" tabindex="0"> <input type="radio" name="option326" checked value="2"> Option </label> <label class="c-button" tabindex="0"> <input type="radio" name="option326" value="3"> Option </label> </div> <div class="c-button-group"> <label class="c-button c-button--secondary" tabindex="0"> <input type="radio" name="option3674" value="1"> Option </label> <label class="c-button" tabindex="0"> <input type="radio" name="option3674" checked> Option </label> <label class="c-button c-button--slim" tabindex="0"> <input type="radio" name="option3674" value="3"> <svg class='c-button__icon c-button__icon--large'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#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.

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.

<button class='c-button c-button--large u-mb-small'>Large Button</button> <button class='c-button u-mb-small'>Regular Button</button> <button class='c-button c-button--small u-mb-small'>Small Button</button> <button class='c-button c-button--tiny u-mb-small'>Tiny Button</button> <button class='c-button c-button--micro'>Micro Button</button>

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.

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

Invert

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

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

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.

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

Slim

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

<button class='c-button c-button--slim c-button--small u-mb-small'> <svg class='c-button__icon'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon" /></svg> </button> <button class='c-button c-button--slim u-mb-small'> <svg class='c-button__icon'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#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="/static/img/evotoolkit-a9f6d11dc7.svg#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="/static/img/evotoolkit-a9f6d11dc7.svg#loading"></use></svg> </div> </button>

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-mb-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-mb-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-mb-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-mb-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 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