Avant UI Kit

Documentation

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Standard buttons

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. 

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <button> or <input> elements

Link 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Outline buttons

Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button. 

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Rounded buttons

Add .rounded-pill to make a rounded button. 

<button type="button" class="btn btn-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-outline-primary rounded-pill">Primary</button>

Squared buttons

Add .rounded-0 to make a squared button. 

<button type="button" class="btn btn-primary rounded-0">Primary</button>
<button type="button" class="btn btn-outline-primary rounded-0">Primary</button>

Button with icons

Use an icon inside a button with .btn-icon and .btn-text and some extra HTML markup. We will use Font Awesome icons.

Primary Primary 
<a href="#" class="btn btn-primary btn-icon">
    <i class="fas fa-check"></i>
    <span class="btn-text">Primary</span>
</a>

<a href="#" class="btn btn-outline-primary btn-icon">
    <i class="fas fa-check"></i>
    <span class="btn-text">Primary</span>
</a>

Sizes

Add .btn-lg for a large button or .btn-sm for a small button. 

<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-outline-primary btn-lg">Primary</button>
<button type="button" class="btn btn-primary btn-lg rounded-pill">Primary</button>
<button type="button" class="btn btn-primary btn-lg rounded-0">Primary</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
<button type="button" class="btn btn-primary btn-sm rounded-pill">Primary</button>
<button type="button" class="btn btn-primary btn-sm rounded-0">Primary</button>

Create block level buttons by adding .btn-block. 

<button type="button" class="btn btn-primary btn-lg btn-block">Block</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block</button>

Active/Disabled

Buttons will appear pressed with addition of .active (only for links) and disabled with addition of disabled (the boolean attribute).

Active Active 
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Active</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Active</a>
<button type="button" class="btn btn-lg btn-primary" disabled>Disabled</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Disabled</button>

Button group

Wrap a series of buttons with .btn in .btn-group. 

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>

Checkbox and radio buttons

Bootstrap’s .button styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling. 

<div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
        <input type="checkbox" checked autocomplete="off"> Checked
    </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio
    </label>
</div>

Button toolbar

Combine sets of button groups into button toolbars for more complex components. 

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>
        <button type="button" class="btn btn-secondary">3</button>
        <button type="button" class="btn btn-secondary">4</button>
    </div>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary"><i class="fas fa-backward"></i></button>
        <button type="button" class="btn btn-secondary"><i class="fas fa-stop"></i></button>
        <button type="button" class="btn btn-secondary"><i class="fas fa-play"></i></button>
        <button type="button" class="btn btn-secondary"><i class="fas fa-forward"></i></button>
    </div>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group-vertical" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">First</button>
        <button type="button" class="btn btn-secondary">Second</button>
        <button type="button" class="btn btn-secondary">Third</button>
    </div>
</div>

Social buttons

Button using colors from the most popular social services around the web. 



<button type="button" class="btn btn-facebook">Facebook</button>
<button type="button" class="btn btn-twitter">Twitter</button>
<button type="button" class="btn btn-linkedin">Linkedin</button>
<button type="button" class="btn btn-pinterest">Pinterest</button>
<button type="button" class="btn btn-youtube">Youtube</button>
<button type="button" class="btn btn-dribble">Dribble</button>
<button type="button" class="btn btn-behance">Behance</button>
<button type="button" class="btn btn-github">Github</button>
<button type="button" class="btn btn-outline-facebook">Facebook</button>
<button type="button" class="btn btn-outline-twitter">Twitter</button>
<button type="button" class="btn btn-outline-linkedin">Linkedin</button>
<button type="button" class="btn btn-outline-pinterest">Pinterest</button>
<button type="button" class="btn btn-outline-youtube">Youtube</button>
<button type="button" class="btn btn-outline-dribble">Dribble</button>
<button type="button" class="btn btn-outline-behance">Behance</button>
<button type="button" class="btn btn-outline-github">Github</button>

View the complete button documentation at Bootstrap website.