Xena Developer
Site
Sign in
Design System
Search…
Introduction
The possibilities
Development
Get started
Samples
API documentation
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
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
>
Previous
Alerts and warnings
Next
Colors and fonts
Last modified
1yr ago
Copy link
Outline
Button group
Justified button group: