> For the complete documentation index, see [llms.txt](https://docs-drift.g-axon.work/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-drift.g-axon.work/components/buttons.md).

# Buttons

### Default Buttons

{% tabs %}
{% tab title="Primary" %}
![](/files/-Loe1Mf7AYM95XmqqC3I)

```markup
<button type="button" class="btn btn-primary">Primary</button>
```

{% endtab %}

{% tab title="Secondary" %}
![](/files/-Loe2riJx81IFd1g4b_l)

```markup
<button type="button" class="btn btn-secondary">Secondary</button>
```

{% endtab %}

{% tab title="Success" %}
![](/files/-Loe30pYeM11qSzKUt3r)

```markup
<button type="button" class="btn btn-success">Success</button>
```

{% endtab %}

{% tab title="Warning" %}
![](/files/-Loe4b7j662nnJ8pt0TT)

```markup
<button type="button" class="btn btn-warning">Warning</button>
```

{% endtab %}

{% tab title="Danger" %}
![](/files/-Loe4ekR55mFIqv-PAdI)

```markup
<button type="button" class="btn btn-danger">Danger</button>
```

{% endtab %}

{% tab title="Info" %}
![](/files/-Loe4o4ryjtrgcHcMvrg)

```markup
<button type="button" class="btn btn-info">Info</button>
```

{% endtab %}

{% tab title="Light" %}
![](/files/-Loe51LhSJHCSXkJT8Xr)

```markup
<button type="button" class="btn btn-light">Light</button>
```

{% endtab %}

{% tab title="Dark" %}
![](/files/-Loe5AF8tg8cWMzhKsbz)

```markup
<button type="button" class="btn btn-dark">Dark</button>
```

{% endtab %}

{% tab title="Link" %}
![](/files/-Loe5I0ycgVuFAvSMa7l)

```markup
<button type="button" class="btn btn-link">Link</button>
```

{% endtab %}
{% endtabs %}

### Button Types

{% tabs %}
{% tab title="Link" %}

```markup
<a class="btn btn-primary" href="javascript:void(0)" role="button">Link</a>
```

{% endtab %}

{% tab title="Button" %}

```markup
<button class="btn btn-primary" type="submit">Button</button>
```

{% endtab %}

{% tab title="Input" %}

```markup
<input class="btn btn-primary" type="button" value="Input">
```

{% endtab %}

{% tab title="Submit" %}

```markup
<input class="btn btn-primary" type="submit" value="Submit">
```

{% endtab %}

{% tab title="Reset" %}

```markup
<input class="btn btn-primary" type="reset" value="Reset">
```

{% endtab %}
{% endtabs %}

### Button With Different Sizes

{% tabs %}
{% tab title="Large" %}
![](/files/-Loe7W5NT6mi3yRtLt04)

```markup
<button type="button" class="btn btn-primary btn-lg">Large button</button>
```

{% endtab %}

{% tab title="Small" %}
![](/files/-Loe7umtHHxXenyTBDKM)

```markup
<button type="button" class="btn btn-primary btn-sm">small button</button>
```

{% endtab %}

{% tab title="Default" %}
![](/files/-Loe8CcgE8P-UWm31_mC)

```markup
<button type="button" class="btn btn-primary">Default button</button>
```

{% endtab %}
{% endtabs %}

### Outline Buttons

{% tabs %}
{% tab title="Primary" %}
![](/files/-LoeAuIbjiFg3airYzrX)

```markup
<button type="button" class="btn btn-outline-primary">Primary</button>
```

{% endtab %}

{% tab title="Secondary" %}
![](/files/-LoeAx9LmvViEhl3SFYb)

```markup
<button type="button" class="btn btn-outline-secondary">Secondary</button>
```

{% endtab %}

{% tab title="Success" %}
![](/files/-LoeAzvf61F0Bh3x4RQp)

```markup
<button type="button" class="btn btn-outline-success">Success</button>
```

{% endtab %}

{% tab title="Danger" %}
![](/files/-LoeB4OxmTFBxhJFpHtk)

```markup
<button type="button" class="btn btn-outline-danger">Danger</button>
```

{% endtab %}

{% tab title="Warning" %}
![](/files/-LoeB8psOXrPtsdNroDm)

```markup
<button type="button" class="btn btn-outline-warning">Warning</button>
```

{% endtab %}

{% tab title="Info" %}
![](/files/-LoeBBVoe2YEzS_WuX9N)

```markup
<button type="button" class="btn btn-outline-info">Info</button>
```

{% endtab %}

{% tab title="Light" %}
![](/files/-LoeBEa4yJ9jXIBCnmHU)

```markup
<button type="button" class="btn btn-outline-light">Light</button>
```

{% endtab %}

{% tab title="Dark" %}
![](/files/-LoeBICh7MzIC_jXfFJG)

```markup
<button type="button" class="btn btn-outline-dark">Dark</button>
```

{% endtab %}
{% endtabs %}

### Block Level Buttons

![](/files/-LoeCnKi4ZwpaP1XcULK)

```markup
<button type="button" class="btn btn-primary btn-block">Block level button</button>
```

### Button States

{% tabs %}
{% tab title="Active Button" %}
![](/files/-Loe8CcgE8P-UWm31_mC)

```markup
<button type="button" class="btn btn-secondary active">Default Button</button>
```

{% endtab %}

{% tab title="Active Link" %}
![](/files/-LoeEUtgZxrEBTSiJyjG)

```markup
<a href="javascript:void(0)" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
```

{% endtab %}

{% tab title="Disabled Button" %}
![](/files/-LoeExwAb2NR7jEqhbwv)

```markup
<button type="button" class="btn btn-primary" disabled="">Primary buttonD</button>
```

{% endtab %}

{% tab title="Disabled Link" %}
![](/files/-LoeFdqBO8w3vn56IARS)

```markup
<a href="javascript:void(0)" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
```

{% endtab %}
{% endtabs %}

### Checkbox Buttons

{% tabs %}
{% tab title="Checked" %}
![](/files/-LoeLrvq2jWxpSAe6NZA)

```markup
<span class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary">
    <input type="checkbox" checked=""> Checked
  </label>
</span>
```

{% endtab %}

{% tab title="Unchecked" %}
![](/files/-LoeLuHMh1qXGuM0wlxB)

```markup
<span class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-primary">
    <input type="checkbox"> Unchecked
  </label>
</span>
```

{% endtab %}
{% endtabs %}

### Radio Buttons

{% tabs %}
{% tab title="Default" %}
![](/files/-LoeMU1SDHB_zrTqYEf6)

```markup
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary"> <input type="radio" name="options" id="option1">
        Radio
    </label>
    <label class="btn btn-primary active"> <input type="radio" name="options" id="option2" checked=""> Active
    </label>
    <label class="btn btn-primary"> <input type="radio" name="options" id="option3">
        Radio
    </label>
</div>
```

{% endtab %}

{% tab title="Outline" %}
![](/files/-LoeMdyLDY2taZdzu_w2)

```markup
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-outline-secondary"> <input type="radio" name="options" id="option4"> Radio
    </label>
    <label class="btn btn-outline-secondary active">
        <input type="radio" name="options" id="option5" checked=""> Active
    </label>
    <label class="btn btn-outline-secondary"> <input type="radio" name="options" id="option6"> Radio
    </label>
</div>
```

{% endtab %}
{% endtabs %}

### Toggle States

{% tabs %}
{% tab title="Default" %}
![](/files/-LoeNYVTEJfpSU3z0Gqo)

```markup
<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true">
    Single toggle
</button>
```

{% endtab %}

{% tab title="Outline" %}
![](/files/-LoeNjFRtUfQ4Ix0-BgC)

```markup
<button type="button" class="btn btn-outline-secondary" data-toggle="button" aria-pressed="false">
    Single toggle
</button>
```

{% endtab %}
{% endtabs %}