Buttons

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

Buttons on Bootstrap

Phoenix Buttons

<button class="btn btn-phoenix-primary me-1 mb-1" type="button">Primary</button>
<button class="btn btn-phoenix-secondary me-1 mb-1" type="button">Secondary</button>
<button class="btn btn-phoenix-success me-1 mb-1" type="button">Success</button>
<button class="btn btn-phoenix-danger me-1 mb-1" type="button">Danger</button>
<button class="btn btn-phoenix-warning me-1 mb-1" type="button">Warning</button>
<button class="btn btn-phoenix-info me-1 mb-1" type="button">Info</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-danger me-1 mb-1" type="button">Danger</button>
<button class="btn btn-warning me-1 mb-1" type="button">Warning</button>
<button class="btn btn-info me-1 mb-1" type="button">Info</button>
<button class="btn btn-link me-1 mb-1" type="button">Link</button>

Soft Buttons

<button class="btn btn-soft-primary me-1 mb-1" type="button">Primary</button>
<button class="btn btn-soft-secondary me-1 mb-1" type="button">Secondary</button>
<button class="btn btn-soft-success me-1 mb-1" type="button">Success</button>
<button class="btn btn-soft-danger me-1 mb-1" type="button">Danger</button>
<button class="btn btn-soft-warning me-1 mb-1" type="button">Warning</button>
<button class="btn btn-soft-info me-1 mb-1" type="button">Info</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-danger me-1 mb-1" type="button">Danger</button>
<button class="btn btn-outline-warning me-1 mb-1" type="button">Warning</button>
<button class="btn btn-outline-info me-1 mb-1" type="button">Info</button>

Close Buttons

Provide an option to dismiss or close a component with .btn-close. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default background-image. Be sure to include text for screen readers, as we’ve done with aria-label.

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

Button Sizes

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

<button class="btn btn-primary btn-sm me-1 mb-1" type="button">Request Payout</button>
<button class="btn btn-primary me-1 mb-1" type="button">Request Payout</button>
<button class="btn btn-primary btn-lg me-1 mb-1" type="button">Request Payout</button>

Button Capsule

<button class="btn btn-phoenix-secondary rounded-pill me-1 mb-1" type="button">Example
</button><button class="btn btn-phoenix-secondary rounded-pill me-1 mb-1" type="button">
  <span class="fas fa-align-left me-2" data-fa-transform="shrink-3"></span>Icon Left</button>
<button class="btn btn-phoenix-secondary rounded-pill me-1 mb-1" type="button">
  Icon Right <span class="fas fa-align-right ms-2" 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-phoenix-secondary rounded-pill me-1 mb-1" type="button">Capsule Small</button>
<button class="btn btn-phoenix-secondary rounded-pill me-1 mb-1" type="button">Capsule Regular</button>
<button class="btn btn-lg btn-phoenix-secondary rounded-pill me-1 mb-1" type="button">Capsule Large</button>

Button Group

<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

<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

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

Button group sizing

<div class="btn-group btn-group-lg me-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 mt-2 me-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>

Button group vertical variation

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

Disabled state

<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>
On this page
Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize