WebsiteSign inDesign System

Buttons

Overview of button usage.

Available button styles:

Buttons.

Please note:

  • We do not use the btn-info and btn-warning unless it really make sense in a specific case.

  • btn-primary should only be used once in every view, if possible.

  • All the btn classes can be used on both a and button elements.

Design Guide

Examples:

Primary button.
<button class="btn btn-primary">Buy</button>
<button class="btn btn-default">Cancel</button>
Danger button.
<button class="btn btn-danger">Delete</button>
<button class="btn btn-default">Cancel</button>
Success button.
<button class="btn btn-success">Complete</button>
<button class="btn btn-default">Back</button>

Button group

Four buttons grouped.
 <div class="btn-group">
    <button class="btn btn-default"><i class="fas fa-arrow-left"></i></button>
    <button class="btn btn-default"><i class="fas fa-play-circle"></i></button>
    <button class="btn btn-default"><i class="fas fa-pause-circle"></i></button>
    <button class="btn btn-default"><i class="fas fa-arrow-right"></i></button>
</div>

Justified button group:

Four buttons grouped.
<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button class="btn btn-default"><i class="fas fa-arrow-left"></i></button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default"><i class="fas fa-play-circle"></i></button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default"><i class="fas fa-pause-circle"></i></button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default"><i class="fas fa-arrow-right"></i></button>
    </div>
</div>

Same effect with a elements:

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-default"><i class="fas fa-arrow-left"></i></a>
    ...
</div>
PreviousAlerts and warningsNextColors and fonts

Last updated