| Vapor CSS

Overview

Buttons are used to communicate and initialize actions when the user clicks them. Make sure that the label and states are clear to the user.

Guidelines

  • Use links, rather than buttons, to redirect users to another page of the current website or app, or to another website.

  • Avoid using too many buttons on a page. If you have a lot of buttons, less popular or less important actions may be grouped in a “more” button (dropdown list) or visually styled as isolated actions or links.

  • The button label should allow to foresee what will happen when clicking it.

  • Button labels should be short and use “trigger words”.

  • Avoid using the terms OK, Yes and No to dismiss a Dialog Modal.

  • Whenever possible, the first word of the label should be an action verb (e.g., the label for a button that allows the user to add a notification should be “ADD NOTIFICATION”).

  • When a button includes only an icon (no label), the label should be added in the alternative text element in the HTML and appear in a tooltip when the cursor is above the button.

  • An icon with a label does not need alternative text. In this case, the icon is a visual help to identify the purpose faster and alternative text would be redundant (causing a screen reader to repeat the text).

Base

Base style for all buttons and links with the "btn" class.

Style sheet: /scss/elements/btn.scss

Link
Div button
<div class="spaced-boxes-container flex flex-wrap">
    <a class="btn spaced-box">Link</a>
    <button type="button" class="btn spaced-box">Button</button>
    <div class="btn spaced-box">Div button</div>
    <button type="button" class="btn spaced-box" disabled>Button disabled</button>
    <button type="button" class="btn state-disabled spaced-box">Button disabled</button>
</div>

Color modifiers

Use any of the available button classes to quickly create a styled button.

Style sheet: /scss/elements/btn.scss




<div>
<button type="button" class="btn">
    Default
    <svg width="512" height="512" viewBox="0 0 512 512" class="icon">
        <path d="M128.313 384l64 64 191.582-191.581-191.79-191.788-64 64 127.79 127.788z"></path>
    </svg>
</button>
<button type="button" class="btn" disabled>
    Disabled
    <svg width="512" height="512" viewBox="0 0 512 512" class="icon">
        <path d="M128.313 384l64 64 191.582-191.581-191.79-191.788-64 64 127.79 127.788z"></path>
    </svg>
</button>
</div>
<br>
<div>
    <button type="button" class="btn mod-primary">
        Primary
        <svg width="512" height="512" viewBox="0 0 512 512" class="icon">
            <path d="M128.313 384l64 64 191.582-191.581-191.79-191.788-64 64 127.79 127.788z"></path>
        </svg>
    </button>
    <button type="button" class="btn mod-primary" disabled>
        Disabled
        <svg width="512" height="512" viewBox="0 0 512 512" class="icon">
            <path d="M128.313 384l64 64 191.582-191.581-191.79-191.788-64 64 127.79 127.788z"></path>
        </svg>
    </button>
</div>
<br>
<div>
    <button type="button" class="btn mod-danger">
        Danger
        <svg width="512" height="512" viewBox="0 0 512 512" class="icon">
            <path d="M128.313 384l64 64 191.582-191.581-191.79-191.788-64 64 127.79 127.788z"></path>
        </svg>
    </button>
    <button type="button" class="btn mod-danger state-disabled">
        Disabled
        <svg width="512" height="512" viewBox="0 0 512 512" class="icon">
            <path d="M128.313 384l64 64 191.582-191.581-191.79-191.788-64 64 127.79 127.788z"></path>
        </svg>
    </button>
</div>
<br>
<div>
    <button type="button" class="btn mod-link">
        Link
        <svg width="512" height="512" viewBox="0 0 512 512" class="icon">
            <path d="M128.313 384l64 64 191.582-191.581-191.79-191.788-64 64 127.79 127.788z"></path>
        </svg>
    </button>
    <button type="button" class="btn mod-link" disabled>
        Disabled
        <svg width="512" height="512" viewBox="0 0 512 512" class="icon">
            <path d="M128.313 384l64 64 191.582-191.581-191.79-191.788-64 64 127.79 127.788z"></path>
        </svg>
    </button>
</div>

Size modifiers

Fancy larger buttons? Use `.mod-large` for a larger button, used in our login form.

Style sheet: /scss/elements/btn.scss

<button type="button" class="btn">Default</button>
<button type="button" class="btn mod-large">Large</button>
<button type="button" class="btn mod-small">Small</button>

Append and prepend

Add text or icons before and after any button.

Style sheet: /scss/elements/btn-prepend.scss

<div class="spaced-boxes-container flex flex-wrap"> <!-- Container not required -->
    <button type="button" class="btn mod-append spaced-box">
        <!-- Make sure not to let any spaces between the btn-append span and the label! -->
        Button append<span class="btn-append">S</span>
    </button>

    <button type="button" class="btn mod-append mod-large spaced-box">
        Button large append<span class="btn-append">BIG</span>
    </button>

    <button type="button" class="btn mod-prepend spaced-box">
        <span class="btn-prepend">S</span>Button prepend
    </button>

    <button type="button" class="btn mod-prepend mod-large spaced-box">
        <span class="btn-prepend">L</span>Button large prepend
    </button>

    <button type="button" class="btn mod-prepend mod-large spaced-box">
        <span class="btn-prepend mod-icon">
            <svg viewbox="0 0 46 46"><path d="M45.99 23.54c0-1.627-.149-3.191-.426-4.693h-22.05v8.875h12.599c-.543 2.868-2.192 5.298-4.671 6.925v5.757h7.566c4.427-3.994 6.981-9.876 6.981-16.864" fill="#4285f4"/><path d="M23.516 45.962c6.321 0 11.62-2.054 15.493-5.559l-7.566-5.757c-2.096 1.377-4.778 2.19-7.928 2.19-6.097 0-11.258-4.04-13.1-9.459H2.594v5.944c3.852 7.498 11.769 12.64 20.92 12.64" fill="#34a853"/><path d="M10.417 27.378a13.549 13.549 0 0 1-.734-4.359c0-1.512.266-2.983.734-4.359v-5.944H2.596a22.554 22.554 0 0 0 0 20.608l7.821-5.944" fill="#fbbc05"/><path d="M23.516 9.2c3.437 0 6.523 1.158 8.949 3.431L39.18 6.05C35.126 2.348 29.827.074 23.516.074c-9.151 0-17.07 5.141-20.92 12.64l7.821 5.944c1.841-5.423 7-9.459 13.1-9.459" fill="#ea4335"/></svg>
        </span>Login with Google
    </button>

    <button type="button" class="btn dropdown-toggle mod-append spaced-box">
        Dropdown append<span class="dropdown-toggle-arrow"></span><span class="btn-append">S</span>
    </button>

    <button type="button" class="btn mod-prepend dropdown-toggle spaced-box">
        <span class="btn-prepend">S</span>Dropdown prepend<span class="dropdown-toggle-arrow"></span>
    </button>

    <button type="button" class="btn mod-append mod-on-hover spaced-box">
        Append on hover<span class="btn-append">S</span>
    </button>

    <button type="button" class="btn mod-prepend mod-on-hover spaced-box">
        <span class="btn-prepend">S</span>Prepend on hover
    </button>

    <button type="button" class="btn spaced-box">
        Button
    </button>

    <button type="button" class="btn dropdown-toggle spaced-box">
        Option 5<span class="dropdown-toggle-arrow"></span>
    </button>

    <button type="button" class="btn dropdown-toggle dropdown-toggle-placeholder spaced-box">
        Select an option<span class="dropdown-toggle-arrow"></span>
    </button>
</div>

<!-- Simple hack since I can't set a class when inserting site.data.icons['domain-google'] -->
<style>
    .btn-prepend.mod-icon > svg {
        width: 32px;
        height: 32px;
    }
</style>

Confirm

Show a confirm message when the user need feedback

Style sheet: /scss/elements/btn.scss

<div>
    <button data-confirm-success="It's a success" data-confirm-error="It's an error" type="button" class="btn mod-confirm mod-confirm-left exemple1">
        Confirm button
        <svg class="icon confirm-icon-success" width="512px" height="512px" viewBox="0 0 512 512">
            <polygon points="448,64.016 192,320.428 64,192.343 0,256.343 192,448.428 512,128.016 "/>
        </svg>
        <svg class="icon confirm-icon-error" width="512px" height="512px" viewBox="0 0 512 512">
            <polygon points="480.002,96.001 416.002,32.002 256.003,192 96.001,31.999 32.002,95.998 192.004,256 32.005,415.998 96.005,479.998 256.004,320 415.998,479.994 479.998,415.995 320.003,256 "/>
        </svg>
    </button>
</div>

<script>
    var num = 0;
    $('.exemple1').click(function(event) {
        $(event.currentTarget).toggleClass('mod-confirm-success', num == 0);
        $(event.currentTarget).toggleClass('mod-confirm-error', num == 1);
        if (num == 2) {
            $(event.currentTarget).removeClass('mod-confirm-error');
            num = 0;
        } else {
            num++;
        }
    });
</script>

Alignment

Show how to dispose your multiple buttons

Style sheet: /scss/elements/btn.scss

Link
<div>
    <a class="btn mod-primary">Link</a>
    <button class="btn btn-primary">Primary button</button>
    <div class="btn-container">
        <button class="btn">Button with container</button>
    </div>
    <div class="btn-container" title="tooltip ...">
        <a class="btn mod-primary state-disabled">Link disabled with a tooltip</a>
    </div>
    <div class="btn-container" title="tooltip ...">
        <button class="btn" disabled>Button disabled with a tooltip</button>
    </div>
</div>