# Buttons

Available button styles:

![Buttons.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoLteVB2dCbBy_Vu9X%2F-LZoLuG5DK98_jl0rgwH%2Fbuttons_overview.PNG?generation=1551361615694336\&alt=media)

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.

{% content-ref url="" %}
[](https://dev.xena.biz/xena-developer/user-interface/styleguide)
{% endcontent-ref %}

Examples:

![Primary button.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoLteVB2dCbBy_Vu9X%2F-LZoLuG7JOEb2i6a8Sgn%2Fbuttons_primary.PNG?generation=1551361615731623\&alt=media)

```markup
<button class="btn btn-primary">Buy</button>
<button class="btn btn-default">Cancel</button>
```

![Danger button.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoLteVB2dCbBy_Vu9X%2F-LZoLuG9flL7DO1eyUkE%2Fbuttons_danger.PNG?generation=1551361615995930\&alt=media)

```markup
<button class="btn btn-danger">Delete</button>
<button class="btn btn-default">Cancel</button>
```

![Success button.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoLteVB2dCbBy_Vu9X%2F-LZoLuGBcRRgR11CMAmE%2Fbuttons_success.PNG?generation=1551361616137834\&alt=media)

```markup
<button class="btn btn-success">Complete</button>
<button class="btn btn-default">Back</button>
```

## Button group

![Four buttons grouped.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoLteVB2dCbBy_Vu9X%2F-LZoLuGDlKRtBtscvmxB%2Fbuttons_group.PNG?generation=1551361615967770\&alt=media)

```markup
 <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.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoLteVB2dCbBy_Vu9X%2F-LZoLuGFfhcmr359haRN%2Fbuttons_group-just.PNG?generation=1551361616127857\&alt=media)

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

```markup
<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-default"><i class="fas fa-arrow-left"></i></a>
    ...
</div>
```