Buttons

                HTML
                
                    Copy
                
<button class="btn btn-default">Button</button>

Types

Primary

In general, limit usage to one per page primary button per view. Uses .btn-primary

Secondary

The secondary button is used when multiple actions surface information or start a workflow, via .btn-primary-outline.

Link-style

When other types of Buttons may be too distracting, use link-style buttons, .btn-link.

Specialty Buttons

Destructive

Destructive buttons, .btn-danger, are attention demanding and indicative of high serverity outcomes, and should be saved for critical destructive actions like deleting records.

Success

Success buttons, .btn-success, should only be used in the context ofa success/confirmation dialog, alert, or toast

Warning

Warning buttons, .btn-warning, should only be used in the context of a warning dialog, alert, or toast

Filter

Filter buttons, .btn-filter, should only be used in the context of manipulating data sets

Dark (Analytics Header)

Dark buttons, .btn-dark, should only be used in the Analytics Page Header

Variants

Icon-only buttons

Icon buttons come in three types: Outline, Secondary, and Flat

Icon buttons should not be used in button bars on accompanied by text labels. If paired with other buttons, both must be the 'flat' or link style.

                    HTML
                    
                        Copy
                    
                

                    
<button class="btn btn-icon btn-icon-outline">
    <svg class="qw-icon-inline" viewBox="0 0 24 24">
        <use xlink:href="#qw-icon-bullhorn"></use>
    </svg>
</button>
<button class="btn btn-icon btn-icon-secondary">
    <svg class="qw-icon-inline" viewBox="0 0 24 24">
        <use xlink:href="#qw-icon-bullhorn"></use>
    </svg>
</button>
<button class="btn btn-icon btn-icon-flat">
    <svg class="qw-icon-inline" viewBox="0 0 24 24">
        <use xlink:href="#qw-icon-bullhorn"></use>
    </svg>
</button>
                
                

Size

Small buttons, .btn-sm or .btn-icon-sm, can be used in dense interfaces or where space is limited. Large buttons, .btn-lg or .btn-icon-lg, should be used only in sparse interfaces where the CTA needs significant attention. The default size is used in all other situations

Do NOT use multiple sizes of buttons together in the same context.

State

Disabled state is used when an action is not yet possible. It is applied via the disabled attribute and can be added to any button type.

Buttons vs. Links

The HTML elements for button and link elements describe specific types of action when they are used. It is important to use the correct element in the correct context:

Use buttons when performing an action such as: 'upload', 'create new', 'next', etc.
Use a link when navigating to another place (ususally another page)

The distinction in use is most important to screen reader user, but also to keyboard users, as the interaction is different between buttons and links. The element type affords the user an affordance as to what will happen.

If you cannot use a <button> element for an action and instead must use an <a>, you must do the following:

Add role="button" attribute to the link to make the element announce itself as a button
Add a JavaScript event handler for when the user presses the spacebar key. This must be done because a button will repond to both the spacebar and enter keypress, but an <a> does not, and the user expects the elemet to behave as announced.

Voyager