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>

Subtle Buttons

<button class="btn btn-subtle-primary me-1 mb-1" type="button">Primary</button>

<button class="btn btn-subtle-secondary me-1 mb-1" type="button">Secondary</button>

<button class="btn btn-subtle-success me-1 mb-1" type="button">Success</button>

<button class="btn btn-subtle-danger me-1 mb-1" type="button">Danger</button>

<button class="btn btn-subtle-warning me-1 mb-1" type="button">Warning</button>

<button class="btn btn-subtle-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

Add data-bs-theme="dark" to the .btn-close class, or to its parent element to invert the close button. This uses filter property to invert the background-image without overriding its value..

<div class="bg-body-highlight rounded-1 p-3" data-bs-theme="dark">

  <button class="btn-close" type="button" aria-label="Close"></button>

  <button class="btn-close" 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

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.15.0

Demo widget
Request a callbackSearch in chatShow historyReport to AdminClose Support

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working
Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

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