EG Xena Developer
WebsiteSign inDesign System
  • Introduction
  • The possibilities
    • Best practices
    • User experience
  • Development
    • Get started
      • Become a developer
      • Register your app
      • The Xena API
      • Authorization
      • Using OAuth
      • Using Xena Api with OAuth
      • Using WebHooks
      • Using Websync
      • Using Xena API Key
      • Creating plugins
    • Samples
    • API documentation
      • Xena
      • Cars (Giulia)
      • Articles & prices (Gaia)
  • User interface
    • Xena Design System
    • Use our stylesheet
    • Design Guide
      • Alerts and warnings
      • Buttons
      • Colors and fonts
      • Collapsible
      • Dropdowns
      • Forms
      • Icons
      • Layout
      • Modals
      • Navigation
      • Pagination
      • Panels
      • Tables
      • Other components
Powered by GitBook
On this page
  • Button group
  • Justified button group:
  1. User interface
  2. Design Guide

Buttons

Overview of button usage.

PreviousAlerts and warningsNextColors and fonts

Last updated 4 years ago

Available button styles:

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.

Examples:

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

Button group

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

<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>
Design Guide
Buttons.
Primary button.
Danger button.
Success button.
Four buttons grouped.
Four buttons grouped.