Buttons trigger actions in forms, dialogs and toolbars. Choose a colour variant for the importance of the action, outline or link styles for secondary choices, and combine them with icons, badges, spinners and size utilities.
1Solid variants
One button per theme colour, plus the link style for low-emphasis actions.
<div class="d-flex flex-wrap gap-2">
<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>
</div>2Outline variants
Outline buttons keep the colour but drop the heavy fill, good for secondary actions.
<div class="d-flex flex-wrap gap-2">
<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-dark">Dark</button>
</div>3Sizes
btn-lg and btn-sm next to the default size.
<div class="d-flex flex-wrap align-items-center gap-2">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary" style="--ui-btn-padding-y: .1rem; --ui-btn-padding-x: .5rem; --ui-btn-font-size: .75rem;">Extra small</button>
</div>4Icon and text
An icon before (or after) the label reinforces what the button does.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-primary"><i class="bi bi-plus-lg" aria-hidden="true"></i> New project</button>
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-download" aria-hidden="true"></i> Export CSV</button>
<button type="button" class="btn btn-success"><i class="bi bi-send-fill" aria-hidden="true"></i> Send invoice</button>
<button type="button" class="btn btn-outline-primary">Continue <i class="bi bi-arrow-right" aria-hidden="true"></i></button>
</div>5Icon-only buttons
Square icon buttons for toolbars; aria-label gives them an accessible name.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-light border" aria-label="Edit"><i class="bi bi-pencil-fill" aria-hidden="true"></i></button>
<button type="button" class="btn btn-light border" aria-label="Duplicate"><i class="bi bi-copy" aria-hidden="true"></i></button>
<button type="button" class="btn btn-light border" aria-label="Share"><i class="bi bi-share-fill" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-danger" aria-label="Delete"><i class="bi bi-trash-fill" aria-hidden="true"></i></button>
<button type="button" class="btn btn-primary rounded-circle ca-btn-round" aria-label="Add"><i class="bi bi-plus-lg" aria-hidden="true"></i></button>
</div>6Disabled state
The disabled attribute on buttons, or .disabled with aria-disabled on links.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-primary" disabled>Primary disabled</button>
<button type="button" class="btn btn-outline-secondary" disabled>Outline disabled</button>
<a class="btn btn-success disabled" role="button" aria-disabled="true">Link disabled</a>
</div>7Loading buttons
Spinners inside buttons while an action is in progress.
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-primary" type="button" disabled><span class="spinner-border spinner-border-sm" aria-hidden="true"></span> <span role="status">Saving...</span></button>
<button class="btn btn-outline-primary" type="button" disabled><span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span> <span role="status">Loading</span></button>
<button class="btn btn-dark" type="button" disabled aria-label="Working"><span class="spinner-border spinner-border-sm" aria-hidden="true"></span></button>
</div>8Block buttons
A grid wrapper stretches buttons to full width; from md they shrink to their content.
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button type="button" class="btn btn-outline-secondary">Back</button>
<button type="button" class="btn btn-primary">Next step</button>
</div>
<div class="d-grid mt-3">
<button type="button" class="btn btn-dark btn-lg"><i class="bi bi-bag-check-fill" aria-hidden="true"></i> Checkout · $155.52</button>
</div>9Shapes
Rounding utilities give pill, square or extra-round corners.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-primary rounded-pill px-4">Pill</button>
<button type="button" class="btn btn-primary rounded-0">Square</button>
<button type="button" class="btn btn-outline-primary rounded-pill px-4">Outline pill</button>
<button type="button" class="btn btn-secondary rounded-4 px-4">Soft corners</button>
</div>10Toggle buttons
data-ui-toggle="button" switches the active state on click.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-outline-primary" data-ui-toggle="button"><i class="bi bi-bell-fill" aria-hidden="true"></i> Follow</button>
<button type="button" class="btn btn-outline-danger active" data-ui-toggle="button" aria-pressed="true"><i class="bi bi-heart-fill" aria-hidden="true"></i> Liked</button>
<button type="button" class="btn btn-outline-secondary" data-ui-toggle="button"><i class="bi bi-bookmark-fill" aria-hidden="true"></i> Save</button>
</div>11Link-style buttons
btn-link and link utilities for actions that should look like text.
<div class="d-flex flex-wrap align-items-center gap-3">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
<button type="button" class="btn btn-link link-secondary px-0 text-decoration-none"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i> Undo</button>
<button type="button" class="btn btn-link link-danger px-0">Remove all</button>
</div>12Share buttons
Generic share actions with icons in soft outline style.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-envelope-fill" aria-hidden="true"></i> Email</button>
<button type="button" class="btn btn-outline-secondary btn-sm" data-demo-copy="Umbraio Hub"><i class="bi bi-link-45deg" aria-hidden="true"></i> Copy link</button>
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i> Message</button>
<button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-printer-fill" aria-hidden="true"></i> Print</button>
</div>13Buttons with badges
Counts and labels next to the button text.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-outline-primary">Comments <span class="badge text-bg-primary ms-1">33</span></button>
<button type="button" class="btn btn-light border"><i class="bi bi-star-fill" aria-hidden="true"></i> Star <span class="badge text-bg-secondary ms-1">6.2k</span></button>
<button type="button" class="btn btn-warning">Upgrade <span class="badge text-bg-dark ms-1">-23%</span></button>
</div>14Soft theme buttons
Custom soft buttons tinted with the template's primary and accent colours.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn ca-btn-soft"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> Soft primary</button>
<button type="button" class="btn ca-btn-soft ca-btn-soft-accent"><i class="bi bi-stars" aria-hidden="true"></i> Soft accent</button>
<button type="button" class="btn ca-btn-grad">Gradient</button>
</div>15Hero call to action
A primary and a secondary action under a headline.
Find the home that fits your life
Thousands of buyers already trust us, and we work hard to keep it that way.
<div class="text-center py-3">
<h3 class="fw-bold">Find the home that fits your life</h3>
<p class="text-body-secondary">Thousands of buyers already trust us, and we work hard to keep it that way.</p>
<div class="d-flex flex-column flex-sm-row justify-content-center gap-2">
<a href="#" class="btn btn-primary btn-lg px-4">Start free trial</a><a href="#" class="btn btn-outline-secondary btn-lg px-4"><i class="bi bi-play-circle-fill" aria-hidden="true"></i> Watch demo</a>
</div>
</div>16Floating action button
A round, raised button pinned to the corner of its container.
Notes list
<div class="position-relative border rounded bg-body-tertiary" style="height: 180px;">
<p class="p-3 text-body-secondary small mb-0">Notes list</p>
<button type="button" class="btn btn-primary rounded-circle shadow position-absolute bottom-0 end-0 m-3 ca-fab" aria-label="New note"><i class="bi bi-pencil-square" aria-hidden="true"></i></button>
</div>17Form action bar
Save, cancel and a destructive action placed apart from the others.
<div class="d-flex flex-wrap gap-2 border-top pt-3">
<button type="button" class="btn btn-outline-danger me-auto"><i class="bi bi-trash-fill" aria-hidden="true"></i> Delete</button>
<button type="button" class="btn btn-light border">Cancel</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>18Two-line download buttons
Larger buttons with an icon and two lines of text, for app or file downloads.
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-dark d-inline-flex align-items-center gap-2 text-start px-3"><span class="fs-3"><i class="bi bi-windows" aria-hidden="true"></i></span><span><span class="d-block small opacity-75">Download for</span><span class="fw-semibold">Desktop</span></span></a><a href="#" class="btn btn-outline-dark d-inline-flex align-items-center gap-2 text-start px-3"><span class="fs-3"><i class="bi bi-phone-fill" aria-hidden="true"></i></span><span><span class="d-block small opacity-75">Get it on</span><span class="fw-semibold">Mobile</span></span></a><a href="#" class="btn btn-light border d-inline-flex align-items-center gap-2 text-start px-3"><span class="fs-3 text-danger"><i class="bi bi-file-earmark-pdf-fill" aria-hidden="true"></i></span><span><span class="d-block small">Brochure</span><span class="fw-semibold">PDF, 3 MB</span></span></a>
</div>19Active and pressed
The .active class and aria-pressed show a button that is switched on.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-primary active" aria-pressed="true">Active primary</button>
<button type="button" class="btn btn-outline-secondary active" aria-pressed="true">Active outline</button>
<button type="button" class="btn btn-outline-secondary" aria-pressed="false">Not pressed</button>
</div>20Tile buttons
Icon on top and label below: quick-action tiles for dashboards.
<div class="row row-cols-2 row-cols-sm-4 g-2">
<div class="col">
<button type="button" class="btn btn-light border w-100 py-3 d-flex flex-column align-items-center gap-1"><span class="fs-4 text-primary"><i class="bi bi-cloud-arrow-up-fill" aria-hidden="true"></i></span><span class="small">Upload</span></button>
</div>
<div class="col">
<button type="button" class="btn btn-light border w-100 py-3 d-flex flex-column align-items-center gap-1"><span class="fs-4 text-primary"><i class="bi bi-folder-plus" aria-hidden="true"></i></span><span class="small">New folder</span></button>
</div>
<div class="col">
<button type="button" class="btn btn-light border w-100 py-3 d-flex flex-column align-items-center gap-1"><span class="fs-4 text-primary"><i class="bi bi-people-fill" aria-hidden="true"></i></span><span class="small">Share</span></button>
</div>
<div class="col">
<button type="button" class="btn btn-light border w-100 py-3 d-flex flex-column align-items-center gap-1"><span class="fs-4 text-primary"><i class="bi bi-gear-fill" aria-hidden="true"></i></span><span class="small">Settings</span></button>
</div>
</div>