Buttons

Styles

The styles available are the standard theme colors; .primary, .secondary, .success, .warning, .danger, .info, .light, .dark and .beets.

For the rewgular style there is also a .link style to make a button look like a <a>.

Regular

.btn-{theme-color}.

<button class="btn btn-primary">...</button>

Alternative Beets Exclusive

.btn-alt-{theme-color}.

<button class="btn btn-alt-primary">...</button>

Ghost Beets Exclusive

.btn-ghost-{theme-color}.

<button class="btn btn-ghost-primary">...</button>

Outline

.btn-outline-{theme-color}.

<button class="btn btn-outline-primary">...</button>

Alternative shape

Force rounded or square shapes using the border utilities.

<button class="btn btn-primary rounded-0">A square button</button>
<button class="btn btn-secondary rounded-pill">A square button</button>
<button class="btn btn-ghost-primary rounded-0">A square button</button>
<button class="btn btn-ghost-secondary rounded-pill">A square button</button>

Sizes

<button class="btn btn-primary btn-sm">Small button</button>
<button class="btn btn-primary">Regular button</button>
<button class="btn btn-primary btn-lg">Large button</button>

Fixed aspect ratio Beets Exclusive

This is designed for use with an icon like FontAwsome, or short text like initials.

The width and height is the same and the padding is removed.

<button class="btn btn-aspect btn-primary mr-2"><i class="fa fa-user"></i></button>
<button class="btn btn-aspect rounded-circle btn-primary mr-2">JB</button>
<button class="btn btn-aspect rounded-circle btn-primary mr-2"><i class="fa fa-pen"></i></button>
<button class="btn btn-aspect rounded-0 btn-outline-primary mr-2"><i class="fa fa-trash"></i></button>
<button class="btn btn-aspect rounded-circle btn-ghost-secondary mr-2"><i class="fa fa-times"></i></button>
<button class="btn btn-aspect btn-beets btn-sm mr-2"><i class="fa fa-user fa-sm"></i></button>
<button class="btn btn-aspect btn-beets mr-2"><i class="fa fa-user"></i></button>
<button class="btn btn-aspect btn-beets btn-lg"><i class="fa fa-user fa-lg"></i></button>

Responsive

You can use breakpoints {sm|md|lg|xl} to decide when a button should have the aspect class.

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>

Responsive

<div class="d-grid gap-2 d-md-block">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-primary" type="button">Button</button>
</div>

Using grid and flexbox

<div class="d-grid gap-2 col-6 mx-auto">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-primary" type="button">Button</button>
</div>

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-primary" type="button">Button</button>
</div>