Messages
Liam Carter uploaded a new document to Project Phoenix
5 minutes ago
Ava Mitchell commented on Marketing Campaign Q3
12 minutes ago
Noah Blake updated the status of Client Onboarding
30 minutes ago
30 minutes ago
Sophia Taylor sent an invoice for Service Renewal
1 hour ago
Ethan Moore completed the task UI Review
2 hours ago
Olivia White assigned you a task in Sales Pipeline
Yesterday
Buttons
Examples
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Buttons on Bootstrap
<button type="button" class="btn btn-default">Default</button>
<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-purple">Purple</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
Use any of the available <a>, <button>, or <input> classes .btn to quickly create a styled button.
<button type="button" class="btn btn-default rounded-pill">Default</button>
<button type="button" class="btn btn-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-success rounded-pill">Success</button>
<button type="button" class="btn btn-danger rounded-pill">Danger</button>
<button type="button" class="btn btn-warning rounded-pill">Warning</button>
<button type="button" class="btn btn-info rounded-pill">Info</button>
<button type="button" class="btn btn-purple rounded-pill">Purple</button>
<button type="button" class="btn btn-light rounded-pill">Light</button>
<button type="button" class="btn btn-dark rounded-pill">Dark</button>
Use .rounded-pill with a default button to give it pill-shaped rounded corners.
<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-purple">Purple</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Use the .btn-outline-** classes to quickly create buttons with borders.
<button type="button" class="btn btn-outline-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-outline-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-outline-success rounded-pill">Success</button>
<button type="button" class="btn btn-outline-danger rounded-pill">Danger</button>
<button type="button" class="btn btn-outline-warning rounded-pill">Warning</button>
<button type="button" class="btn btn-outline-info rounded-pill">Info</button>
<button type="button" class="btn btn-outline-purple rounded-pill">Purple</button>
<button type="button" class="btn btn-outline-light rounded-pill">Light</button>
<button type="button" class="btn btn-outline-dark rounded-pill">Dark</button>
Use .rounded-pill with an outline button to give it pill-shaped rounded corners.
<button type="button" class="btn btn-soft-primary">Primary</button>
<button type="button" class="btn btn-soft-secondary">Secondary</button>
<button type="button" class="btn btn-soft-success">Success</button>
<button type="button" class="btn btn-soft-danger">Danger</button>
<button type="button" class="btn btn-soft-warning">Warning</button>
<button type="button" class="btn btn-soft-info">Info</button>
<button type="button" class="btn btn-soft-purple">Purple</button>
<button type="button" class="btn btn-soft-dark">Dark</button>
Use btn-soft-** class with the below-mentioned variation to create a button with the soft background.
<button type="button" class="btn btn-soft-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-soft-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-soft-success rounded-pill">Success</button>
<button type="button" class="btn btn-soft-danger rounded-pill">Danger</button>
<button type="button" class="btn btn-soft-warning rounded-pill">Warning</button>
<button type="button" class="btn btn-soft-info rounded-pill">Info</button>
<button type="button" class="btn btn-soft-purple rounded-pill">Purple</button>
<button type="button" class="btn btn-soft-dark rounded-pill">Dark</button>
Use the btn-soft-** class along with .rounded-pill to create a softly styled button with rounded corners.
<button type="button" class="btn btn-ghost-primary">Primary</button>
<button type="button" class="btn btn-ghost-secondary">Secondary</button>
<button type="button" class="btn btn-ghost-success">Success</button>
<button type="button" class="btn btn-ghost-danger">Danger</button>
<button type="button" class="btn btn-ghost-warning">Warning</button>
<button type="button" class="btn btn-ghost-info">Info</button>
<button type="button" class="btn btn-ghost-purple">Purple</button>
<button type="button" class="btn btn-ghost-dark">Dark</button>
Use the btn-ghost-** class to create buttons with a transparent background that highlight with color on hover.
<button type="button" class="btn btn-ghost-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-ghost-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-ghost-success rounded-pill">Success</button>
<button type="button" class="btn btn-ghost-danger rounded-pill">Danger</button>
<button type="button" class="btn btn-ghost-warning rounded-pill">Warning</button>
<button type="button" class="btn btn-ghost-info rounded-pill">Info</button>
<button type="button" class="btn btn-ghost-purple rounded-pill">Purple</button>
<button type="button" class="btn btn-ghost-dark rounded-pill">Dark</button>
Combine btn-ghost-** with .rounded-pill to create ghost-style buttons with rounded corners that highlight on hover.
<button type="button" class="btn btn-info" disabled>Info</button>
<button type="button" class="btn btn-purple" disabled>Purple</button>
<button type="button" class="btn btn-danger" disabled>Danger</button>
<button type="button" class="btn btn-dark" disabled>Dark</button>
Use the disabled attribute on a <button> to make it inactive and non-interactive.
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
Add data-bs-toggle="button" to toggle a button’s active state. For pre-toggled buttons, also add .active and aria-pressed="true".
<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">
Use .btn classes with <button>, <a>, or <input> elements, though rendering may vary slightly across browsers.
<a href="#!" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a>
<a href="#!" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a>
<a href="#!" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a>
<a href="#!" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a>
<a href="#!" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a>
<a href="#!" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a>
<a href="#!" class="d-inline-flex focus-ring focus-ring-purple py-1 px-2 text-decoration-none border rounded-2">Purple focus</a>
<a href="#!" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a>
<a href="#!" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a>
Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.
<button type="button" class="btn btn-primary btn-icon">
<i class="ti ti-star fs-lg"></i>
</button>
<button type="button" class="btn btn-purple btn-icon">
<i data-lucide="leaf" class="avatar-xxs"></i>
</button>
<button type="button" class="btn btn-warning btn-icon">
<i class="ti ti-settings fs-xl"></i>
</button>
<button type="button" class="btn btn-soft-info rounded-circle btn-icon">
<i class="ti ti-bell fs-xxl"></i>
</button>
<button type="button" class="btn btn-secondary rounded-circle btn-icon">
<i class="ti ti-rocket fs-xxl"></i>
</button>
<button type="button" class="btn btn-outline-dark rounded-circle btn-icon">
<i class="ti ti-plane fs-xl"></i>
</button>
<button type="button" class="btn btn-soft-secondary btn-icon">
<i class="ti ti-microphone fs-xl"></i>
</button>
<button type="button" class="btn btn-light">
<i class="ti ti-hand-stop align-middle me-1 fs-xl"></i> Stop
</button>
<button type="button" class="btn btn-dark">
<i data-lucide="zap" class="avatar-xxs me-1"></i> Boost
</button>
<button type="button" class="btn btn-outline-info">
<i class="ti ti-credit-card align-middle me-1 fs-xl"></i> Payment
</button>
<button type="button" class="btn btn-outline-warning">
<i class="ti ti-brand-stripe align-middle me-1 fs-xl"></i> Stripe
</button>
<button type="button" class="btn btn-danger">
<i class="ti ti-tools fs-xl me-1"></i> <span>Tools</span>
</button>
<button class="btn btn-sm btn-outline-secondary btn-icon" type="button">
<i class="ti ti-user"></i>
</button>
<button class="btn btn-sm btn-primary btn-icon" type="button">
<i class="ti ti-message-circle"></i>
</button>
<button class="btn btn-sm btn-success btn-icon rounded-circle" type="button">
<i class="ti ti-share"></i>
</button>
<button class="btn btn-info btn-icon rounded-circle" type="button">
<i class="ti ti-bell"></i>
</button>
<button class="btn btn-warning btn-icon" type="button">
<i class="ti ti-alert-triangle"></i>
</button>
<button class="btn btn-outline-danger btn-icon" type="button">
<i class="ti ti-trash"></i>
</button>
<button class="btn btn-outline-purple btn-icon rounded-circle" type="button">
<i class="ti ti-star"></i>
</button>
<!-- Large buttons -->
<button class="btn btn-outline-secondary btn-icon btn-lg" type="button">
<i class="ti ti-user"></i>
</button>
<button class="btn btn-primary btn-icon btn-lg rounded-circle" type="button">
<i class="ti ti-message-circle"></i>
</button>
<button class="btn btn-success btn-icon btn-lg rounded-circle" type="button">
<i class="ti ti-share"></i>
</button>
<button class="btn btn-info btn-icon btn-lg" type="button">
<i class="ti ti-bell"></i>
</button>
<button class="btn btn-warning btn-icon btn-lg" type="button">
<i class="ti ti-alert-triangle"></i>
</button>
<button class="btn btn-danger btn-icon btn-lg" type="button">
<i class="ti ti-trash"></i>
</button>
<button class="btn btn-outline-danger btn-icon btn-lg" type="button">
<i class="ti ti-star"></i>
</button>
Icon only button. Use it when you want a button with just an icon and no text, ideal for compact UI elements or toolbars.
<button type="button" class="btn btn-light">Left</button>
<button type="button" class="btn btn-light">Middle</button>
<button type="button" class="btn btn-light">Right</button>
<button type="button" class="btn btn-light">1</button>
<button type="button" class="btn btn-light">2</button>
<button type="button" class="btn btn-light">3</button>
<button type="button" class="btn btn-light">4</button>
<button type="button" class="btn btn-light">5</button>
<button type="button" class="btn btn-light">6</button>
<button type="button" class="btn btn-light">7</button>
<button type="button" class="btn btn-light">8</button>
<button type="button" class="btn btn-light">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-light">3</button>
<div class="btn-group">
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<div class="btn-group-vertical mb-2">
<button type="button" class="btn btn-light">Top</button>
<button type="button" class="btn btn-light">Middle</button>
<button type="button" class="btn btn-light">Bottom</button>
</div>
<div class="btn-group-vertical mb-2">
<button type="button" class="btn btn-light">Button 1</button>
<button type="button" class="btn btn-light">Button 2</button>
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 3 <span class="caret"></span> </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
Group multiple buttons together by wrapping them with the .btn class inside a .btn-group container. This helps align buttons side by side with consistent spacing and styling.