Button

Use CAKE’s custom button styles for actions in forms, dialogs, and more with support for states and more.

Examples#

CAKE includes predefined button styles with a few extras thrown in for more control.

We provide a "normal / positive" and a "inverted / negative" button styling. You can place the inverted buttons in front of dark background colors.

Positive styles#

preview

<button type="button" class="btn btn-primary">Primary</button> <button type="button"
    class="btn btn-primary" disabled>Primary disabled</button> <button type="button"
    class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-secondary"
    disabled>Secondary disabled</button>

In exceptional cases, the transparency of the positive secondary button can be changed to "white" using the utility modifier .bg-white to ensure the readability of the button text.

Negative styles#

Place the -negative suffix to the button class to get the inverted style.

preview

<button type="button" class="btn btn-primary-negative">Primary</button> <button type="button"
    class="btn btn-primary-negative" disabled>Primary disabled</button> <button type="button"
    class="btn btn-secondary-negative">Secondary</button> <button type="button"
    class="btn btn-secondary-negative" disabled>Secondary disabled</button>

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Button tags#

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Icon#

CAKE provides SVG icons that can be placed inside buttons. Insert the icon sprite to your HTML document. Use the .btn-icon class for basic styling and the size class .icon-24 to set width and height to 24px (1.5rem).

Positiv icon with text#

preview

<button type="button" class="btn btn-primary">
    <svg class="icon btn-icon icon-3 mr-1" placeholder="Placeholder"
        xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>Primary</button> <button type="button" class="btn btn-primary" disabled>
    <svg class="icon btn-icon icon-3 mr-1" placeholder="Placeholder"
        xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>Primary disabled</button> <button type="button" class="btn btn-secondary">
    <svg class="icon btn-icon icon-3 mr-1" placeholder="Placeholder"
        xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>Secondary</button> <button type="button" class="btn btn-secondary" disabled>
    <svg class="icon btn-icon icon-3 mr-1" placeholder="Placeholder"
        xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>Secondary disabled</button>

Positive icon#

preview

<button type="button" class="btn btn-primary">
    <svg class="icon btn-icon icon-3" placeholder="Placeholder" xmlns="http://www.w3.org/2000/svg"
        role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>
</button> <button type="button" class="btn btn-primary" disabled>
    <svg class="icon btn-icon icon-3" placeholder="Placeholder" xmlns="http://www.w3.org/2000/svg"
        role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>
</button> <button type="button" class="btn btn-secondary">
    <svg class="icon btn-icon icon-3" placeholder="Placeholder" xmlns="http://www.w3.org/2000/svg"
        role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>
</button> <button type="button" class="btn btn-secondary" disabled>
    <svg class="icon btn-icon icon-3" placeholder="Placeholder" xmlns="http://www.w3.org/2000/svg"
        role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>
</button>

Negative icon with text#

preview

<button type="button" class="btn btn-primary-negative">
    <svg class="icon btn-icon icon-3 mr-1" placeholder="Placeholder"
        xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>Primary</button> <button type="button" class="btn btn-primary-negative" disabled>
    <svg class="icon btn-icon icon-3 mr-1" placeholder="Placeholder"
        xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>Primary disabled</button> <button type="button" class="btn btn-secondary-negative">
    <svg class="icon btn-icon icon-3 mr-1" placeholder="Placeholder"
        xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>Secondary</button> <button type="button" class="btn btn-secondary-negative" disabled>
    <svg class="icon btn-icon icon-3 mr-1" placeholder="Placeholder"
        xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>Secondary disabled</button>

Negative icon#

preview

<button type="button" class="btn btn-primary-negative">
    <svg class="icon btn-icon icon-3" placeholder="Placeholder" xmlns="http://www.w3.org/2000/svg"
        role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>
</button> <button type="button" class="btn btn-primary-negative" disabled>
    <svg class="icon btn-icon icon-3" placeholder="Placeholder" xmlns="http://www.w3.org/2000/svg"
        role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>
</button> <button type="button" class="btn btn-secondary-negative">
    <svg class="icon btn-icon icon-3" placeholder="Placeholder" xmlns="http://www.w3.org/2000/svg"
        role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>
</button> <button type="button" class="btn btn-secondary-negative" disabled>
    <svg class="icon btn-icon icon-3" placeholder="Placeholder" xmlns="http://www.w3.org/2000/svg"
        role="img" focusable="false">
        <title>
        </title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
        </use>
    </svg>
</button>

Sizes#

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Active state#

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

Disabled state#

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

<button type="button" class="btn btn-primary" disabled>Primary disabled</button>
<button type="button" class="btn btn-secondary" disabled>Secondary disabled</button>

<button type="button" class="btn btn-primary-negative" disabled>Primary disabled</button>
<button type="button" class="btn btn-secondary-negative" disabled>Secondary disabled</button>

Disabled buttons using the <a> element behave a bit different:

  • <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.
  • Some future-friendly styles are included to disable all pointer-events on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.
  • Disabled buttons should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>

Link functionality caveat#

The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex="-1" attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.

Change log#

6.3.0 - 2021-10-01#

Fixed#

  • SCSS: "Button" | fixed font-size for md and smaller to 1rem (16px)

5.1.0 - 2021-03-22#

Changed#

  • SCSS: "Button" | Updated styling of disabled buttons to achieve better contrast ratios and accessibility

5.0.0 - 2021-01-28#

Changed#

  • SCSS: "Button" | rename button mixins
    • button-variant to cake-button-variant
    • button-outline-variant to cake-button-outline-variant
    • button-size to cake-button-size
    • button-size-fixed-height to cake-button-size-fixed-height

4.4.0 - 2020-10-22#

Changed#

  • SCSS: "Button" | set focus style to default CAKE focus on each button variant

4.3.0 - 2020-09-24#

Changed#

  • SCSS: "Button" | add cursor not-allowed to disabled buttons

4.2.0 - 2020-08-27#

Fixed#

  • HTML: "Button" | removed wrapper .cake-example-negative div from some code examples

3.9.0 - 2020-01-16#

Changed#

  • SCSS: "Button" | added new calculated height for xs-md

Removed#

  • SCSS: "Button" | variable $btn-padding-tb-diff and corresponding calculation deleted

3.8.0 - 2019-11-07#

Changed#

  • SCSS: "Button" | Set !default to variable $btn-slider-color, $btn-slider-bg and $btn-slider-box-shadow

Fixed#

  • SCSS: "Button" | Added !default to $btn-slider-hover-color, $btn-slider-hover-bg in _variables.scss file.

3.7.0 - 2019-09-30#

Added#

  • Doc: "Button" | Added possibility to add white background to positive secondary button in documentation.

3.4.0 - 2019-07-04#

Changed#

  • CSS: "Button" | font-size changed to be constant at 1.125rem (18px)