> For the complete documentation index, see [llms.txt](https://dev.xena.biz/xena-developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev.xena.biz/xena-developer/user-interface/styleguide/buttons.md).

# Buttons

Available button styles:

![Buttons.](/files/-LZoLuG5DK98_jl0rgwH)

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="/pages/-L\_7--oVjdh\_pwaAgRHl" %}
[Design Guide](/xena-developer/user-interface/styleguide.md)
{% endcontent-ref %}

Examples:

![Primary button.](/files/-LZoLuG7JOEb2i6a8Sgn)

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

![Danger button.](/files/-LZoLuG9flL7DO1eyUkE)

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

![Success button.](/files/-LZoLuGBcRRgR11CMAmE)

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

## Button group

![Four buttons grouped.](/files/-LZoLuGDlKRtBtscvmxB)

```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.](/files/-LZoLuGFfhcmr359haRN)

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