Buttons

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

Buttons on Bootstrap
Falcon Buttons
<button class="btn btn-falcon-primary me-1 mb-1" type="button">Primary
</button>
<button class="btn btn-falcon-success me-1 mb-1" type="button">Success
</button>
<button class="btn btn-falcon-info me-1 mb-1" type="button">Info
</button>
<button class="btn btn-falcon-warning me-1 mb-1" type="button">Warning
</button>
<button class="btn btn-falcon-danger me-1 mb-1" type="button">Danger
</button>
<button class="btn btn-falcon-default me-1 mb-1" type="button">Default
</button>
Solid Buttons
<button class="btn btn-primary me-1 mb-1" type="button">Primary
</button>
<button class="btn btn-secondary me-1 mb-1" type="button">Secondary
</button>
<button class="btn btn-success me-1 mb-1" type="button">Success
</button>
<button class="btn btn-info me-1 mb-1" type="button">Info
</button>
<button class="btn btn-warning me-1 mb-1" type="button">Warning
</button>
<button class="btn btn-danger me-1 mb-1" type="button">Danger
</button>
<button class="btn btn-light me-1 mb-1" type="button">Light
</button>
<button class="btn btn-dark me-1 mb-1" type="button">Dark
</button>
<button class="btn btn-link me-1 mb-1" type="button">Link
</button>
Outline Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

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

Be sure to include text for screen readers, as we’ve done with aria-label. Disabled close buttons have pointer-events: none and user-select: none applied to, preventing hover and active states from triggering.

<button class="btn-close" type="button" aria-label="Close"></button>
<button class="btn-close" type="button" disabled="" aria-label="Close"></button>
Close buttons white variant

Change the default .btn-close to be white with the .btn-close-white class. This class uses the backdrop-filter property to invert the background-image.

<div class="bg-1000 rounded-1 p-3 light">
  <button class="btn-close btn-close-white" type="button" aria-label="Close"></button>
  <button class="btn-close btn-close-white" type="button" disabled="" aria-label="Close"></button>
</div>
Falcon close button

Falcon close button is properly optimized for both light and dark mode. Use .btn-close-falcon class for falcon close button.

<div class="btn-close-falcon"></div>
Button Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

Small
Regular
Large
<div class="btn btn-secondary btn-sm">Small</div>
<div class="btn btn-secondary">Regular</div>
<div class="btn btn-secondary btn-lg">Large</div>
Icon Buttons
<button class="btn btn-falcon-default btn-sm me-1 mb-1" type="button">
  <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Small
</button>
<button class="btn btn-falcon-default me-1 mb-1" type="button">
  <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Regular
</button>
<button class="btn btn-falcon-default btn-lg me-1 mb-1" type="button">
  <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Large
</button>
<hr />
<button class="btn btn-primary me-1 mb-1" type="button">
  <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Regular
</button>
<button class="btn btn-outline-primary me-1 mb-1" type="button">
  <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Outline
</button>
<hr />
<button class="btn btn-primary me-1 mb-1" type="button">
  Delete<span class="fas fa-trash ms-1" data-fa-transform="shrink-3"></span>
</button>
Button Capsule
<button class="btn btn-falcon-default rounded-pill me-1 mb-1" type="button">Example
</button>
<button class="btn btn-falcon-default rounded-pill me-1 mb-1" type="button">
  <span class="fas fa-align-left me-1" data-fa-transform="shrink-3"></span>Icon Left
</button>
<button class="btn btn-falcon-default rounded-pill me-1 mb-1" type="button">
  Icon Right<span class="fas fa-align-right" data-fa-transform="shrink-3"></span>
</button>
<button class="btn btn-outline-primary rounded-pill me-1 mb-1" type="button">Outline</button>
<hr />
<button class="btn btn-sm btn-falcon-default rounded-pill me-1 mb-1" type="button">Capsule Small</button>
<button class="btn btn-falcon-default rounded-pill me-1 mb-1" type="button">Capsule Regular</button>
<button class="btn btn-lg btn-falcon-default rounded-pill me-1 mb-1" type="button">Capsule Large</button>

Button Group

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

Button-Group on Bootstrap
Basic Example

Wrap a series of buttons with .btn in.btn-group. Add on optional JavaScript radio and checkbox style behavior with

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

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2 mb-2" role="group" aria-label="First group">
    <button class="btn btn-secondary" type="button">1</button>
    <button class="btn btn-secondary" type="button">2</button>
    <button class="btn btn-secondary" type="button">3</button>
    <button class="btn btn-secondary" type="button">4</button>
  </div>
  <div class="btn-group mb-2 me-2" role="group" aria-label="Second group">
    <button class="btn btn-secondary" type="button">5</button>
    <button class="btn btn-secondary" type="button">6</button>
    <button class="btn btn-secondary" type="button">7</button>
  </div>
  <div class="btn-group mb-2" role="group" aria-label="Third group">
    <button class="btn btn-secondary" type="button">8</button>
  </div>
</div>
Button toolbar with input group

Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mb-2 me-2" role="group" aria-label="First group">
    <button class="btn btn-secondary" type="button">1</button>
    <button class="btn btn-secondary" type="button">2</button>
    <button class="btn btn-secondary" type="button">3</button>
    <button class="btn btn-secondary" type="button">4</button>
  </div>
  <div class="input-group mb-2">
    <div class="input-group-text" id="btnGroupAddon">@</div>
    <input class="form-control" type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon" />
  </div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mb-2" role="group" aria-label="First group">
    <button class="btn btn-secondary" type="button">1</button>
    <button class="btn btn-secondary" type="button">2</button>
    <button class="btn btn-secondary" type="button">3</button>
    <button class="btn btn-secondary" type="button">4</button>
  </div>
  <div class="input-group mb-2">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input class="form-control" type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2" />
  </div>
</div>
Sizing

Instead of aplying button sizing classes to every button in a group, just add .btn-gorup-* to each .btn-group, including each one when nesting multiple groups.

<div class="btn-group btn-group-lg" role="group" aria-label="...">
  <button class="btn btn-secondary" type="button">Left</button>
  <button class="btn btn-secondary" type="button">Middle</button>
  <button class="btn btn-secondary" type="button">Right</button>
</div>
<div class="btn-group mt-2" role="group" aria-label="...">
  <button class="btn btn-secondary" type="button">Left</button>
  <button class="btn btn-secondary" type="button">Middle</button>
  <button class="btn btn-secondary" type="button">Right</button>
</div>
<div class="btn-group btn-group-sm mt-2" role="group" aria-label="...">
  <button class="btn btn-secondary" type="button">Left</button>
  <button class="btn btn-secondary" type="button">Middle</button>
  <button class="btn btn-secondary" type="button">Right</button>
</div>
Vertical variation

Make a set of buttons appear vertically tacked rather than horizontally. Split button dropdowns ae not supported here.

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
</div>
Vertical variation with dropdown
Dropdown link Dropdown
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link 
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop1" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown</a>
    </div>
  </div>
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop2" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"><a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop3" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3"><a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop4" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>
Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Disabled buttons have pointer-events: none; applied to, preventing hover and active states from triggering.

<button class="btn btn-lg btn-primary" type="button" disabled="disabled">Primary button</button>
<button class="btn btn-secondary btn-lg ms-2" type="button" disabled="disabled">Button</button>
Block buttons
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Thank you for creating with Falcon |
2021 © Themewagon

v3.2.0

customize