# Buttons

### Default Buttons

{% tabs %}
{% tab title="Primary" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe1Mf7AYM95XmqqC3I%2Fprimary.png?alt=media\&token=a616713c-8d03-4633-9b87-0b042c0fd8bb)

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

{% endtab %}

{% tab title="Secondary" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe2riJx81IFd1g4b_l%2FDrift%20%20%20Admin%20Template.png?alt=media\&token=96e7e846-389d-4785-b79d-a2f208561b06)

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

{% endtab %}

{% tab title="Success" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe30pYeM11qSzKUt3r%2Fsuccess.png?alt=media\&token=354c4c3d-b531-4bc9-88d6-fcffd940b633)

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

{% endtab %}

{% tab title="Warning" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe4b7j662nnJ8pt0TT%2Fwarning.png?alt=media\&token=eb17f495-aac7-4081-81fe-27b194b60f82)

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

{% endtab %}

{% tab title="Danger" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe4ekR55mFIqv-PAdI%2Fdanger.png?alt=media\&token=8b1ffa8f-ea8d-441f-9643-57a234748767)

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

{% endtab %}

{% tab title="Info" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe4o4ryjtrgcHcMvrg%2Finfo.png?alt=media\&token=9fe9d04e-3d9f-4a9b-9d37-4c19565045d7)

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

{% endtab %}

{% tab title="Light" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe51LhSJHCSXkJT8Xr%2Flight.png?alt=media\&token=f8cff997-6940-4e30-ba95-6fa4122f153c)

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

{% endtab %}

{% tab title="Dark" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe5AF8tg8cWMzhKsbz%2Fdark.png?alt=media\&token=32b90e5d-92a6-4c49-9bea-d5b2e3bb78a7)

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

{% endtab %}

{% tab title="Link" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe5I0ycgVuFAvSMa7l%2Flink.png?alt=media\&token=e89824fd-4535-437e-ac0a-e42722268103)

```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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe7W5NT6mi3yRtLt04%2Flarge-button.png?alt=media\&token=7678f2a6-a120-45c9-a37c-9073b0242aca)

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

{% endtab %}

{% tab title="Small" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe7umtHHxXenyTBDKM%2Fsmall-button.png?alt=media\&token=04c1d467-890e-433e-92e6-0bd6210f1877)

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

{% endtab %}

{% tab title="Default" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe8CcgE8P-UWm31_mC%2Fdefault-button.png?alt=media\&token=5531fff6-fc6c-46e4-b7d8-00e1aa611e27)

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

{% endtab %}
{% endtabs %}

### Outline Buttons

{% tabs %}
{% tab title="Primary" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeAuIbjiFg3airYzrX%2Fprimary.png?alt=media\&token=cf037a43-2b8c-4bee-8722-4e482be64973)

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

{% endtab %}

{% tab title="Secondary" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeAx9LmvViEhl3SFYb%2FSecondary.png?alt=media\&token=5c2e8397-44ec-45c0-b06b-7dd07e5dd2bb)

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

{% endtab %}

{% tab title="Success" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeAzvf61F0Bh3x4RQp%2Fsuccess.png?alt=media\&token=8d46710d-e280-4e95-9353-5dc3e6d84bd4)

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

{% endtab %}

{% tab title="Danger" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeB4OxmTFBxhJFpHtk%2Fdanger.png?alt=media\&token=50463829-54c9-4cd0-86d1-69ee9a64cd7e)

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

{% endtab %}

{% tab title="Warning" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeB8psOXrPtsdNroDm%2Fwarning.png?alt=media\&token=c2c0a203-035e-45df-b744-ec4679d668a9)

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

{% endtab %}

{% tab title="Info" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeBBVoe2YEzS_WuX9N%2Finfo.png?alt=media\&token=6d75224b-4403-4b0e-a969-e57396a9ae01)

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

{% endtab %}

{% tab title="Light" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeBEa4yJ9jXIBCnmHU%2Flight.png?alt=media\&token=3bf834fd-5c96-45c7-971c-d1b586fd0dbe)

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

{% endtab %}

{% tab title="Dark" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeBICh7MzIC_jXfFJG%2Fdark.png?alt=media\&token=69de06b5-687d-44ec-838a-0de466ac5ac7)

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

{% endtab %}
{% endtabs %}

### Block Level Buttons

![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeCnKi4ZwpaP1XcULK%2Fblock-level-buttons.png?alt=media\&token=0c4b5ec6-51c9-4c93-9dfc-b4970e39270a)

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

### Button States

{% tabs %}
{% tab title="Active Button" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-Loe8CcgE8P-UWm31_mC%2Fdefault-button.png?alt=media\&token=5531fff6-fc6c-46e4-b7d8-00e1aa611e27)

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

{% endtab %}

{% tab title="Active Link" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeEUtgZxrEBTSiJyjG%2Factive-primary.png?alt=media\&token=80f81e00-a08b-4980-bbe1-e85be092c1c7)

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

{% endtab %}

{% tab title="Disabled Button" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeExwAb2NR7jEqhbwv%2Fdisabled-primary.png?alt=media\&token=d9be5f0c-9a07-48a8-9983-e712afe92455)

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

{% endtab %}

{% tab title="Disabled Link" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeFdqBO8w3vn56IARS%2Fdisabled-link-button.png?alt=media\&token=64a9924b-8356-4c2d-bb2b-98f456ad60b0)

```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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeLrvq2jWxpSAe6NZA%2Fchecked.png?alt=media\&token=1396c859-0457-409b-b4bc-172011df1c04)

```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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeLuHMh1qXGuM0wlxB%2Funchecked.png?alt=media\&token=ca8c27a5-af89-4896-9f62-7bda462211bb)

```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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeMU1SDHB_zrTqYEf6%2Fradio-buttons.png?alt=media\&token=3dbd1641-fc83-4380-9cb4-2ed081185437)

```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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeMdyLDY2taZdzu_w2%2Foutline-buttons.png?alt=media\&token=d67ad00c-ac3b-4650-9598-069a36477111)

```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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeNYVTEJfpSU3z0Gqo%2Ftoggle-default.png?alt=media\&token=1570502b-4f19-41cf-8c7c-063a22a28e9e)

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

{% endtab %}

{% tab title="Outline" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-LodZPWhUNWLRXJutj4j%2F-LoeNjFRtUfQ4Ix0-BgC%2Ftoggle-outline.png?alt=media\&token=59f032f3-9912-445a-a8cb-1ae2813edafb)

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

{% endtab %}
{% endtabs %}