Skip to content

Buttons

Beets CSS comes with two additional button styles: Ghost and Alternative. There is also a class that forces the button to be an exact square. Useful for buttons containing icons or user initials.

Styles

The Beets CSS styles both make use of the Bootstrap theme colors for your convenience.

Regular

Note

This is the standard Bootstrap button. This is in the documentation for comparison purposes.

.btn-{theme-color}

<button class="btn btn-primary">Primary</button>
<button class="btn btn-link">Link</button>

Outline

Note

This is the standard outlined Bootstrap button. This is in the documentation for comparison purposes.

.btn-outline-{theme-color}

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

Alternative

This style can be viewed as a slightly lighter version of the standard buttons.

.btn-alt-{theme-color}

<button class="btn btn-alt-primary">Primary</button>
<button class="btn btn-alt-secondary">Secondary</button>
<button class="btn btn-alt-success">Success</button>
<button class="btn btn-alt-warning">Warning</button>
<button class="btn btn-alt-danger">Danger</button>
<button class="btn btn-alt-info">Info</button>
<button class="btn btn-alt-light">Light</button>
<button class="btn btn-alt-dark">Dark</button>

Ghost

This style makes the button background transparent with the text colored with the chosen theme color. When hovering, the background gets a light version of the theme color.

.btn-ghost-{theme-color}

<button class="btn btn-ghost-primary">Primary</button>
<button class="btn btn-ghost-secondary">Secondary</button>
<button class="btn btn-ghost-success">Success</button>
<button class="btn btn-ghost-warning">Warning</button>
<button class="btn btn-ghost-danger">Danger</button>
<button class="btn btn-ghost-info">Info</button>
<button class="btn btn-ghost-light">Light</button>
<button class="btn btn-ghost-dark">Dark</button>

Square

This is designed for use with an icon like FontAwsome, or short text like initials. The width and height are the same and the content is center vertically and horizontally.

To use the square button style, add .btn-square to your standard .btn button.

Sizes

The .btn-square class also supports the different button sizes.

<button class="btn btn-primary btn-square btn-lg"><i class="fa-solid fa-user fa-lg"></i></button>
<button class="btn btn-primary btn-square"><i class="fa-solid fa-user"></i></button>
<button class="btn btn-primary btn-square btn-sm"><i class="fa-solid fa-user fa-sm"></i></button>

Inspiration

Here are some buttons for your inspiration!

<button class="btn btn-square btn-primary"><i class="fa-solid fa-user"></i></button>
<button class="btn btn-square btn-primary rounded-circle">JB</button>
<button class="btn btn-square btn-outline-secondary rounded-circle"><i class="fa-solid fa-pen"></i></button>
<button class="btn btn-square btn-outline-danger rounded-0"><i class="fa-solid fa-trash"></i></button>
<button class="btn btn-square btn-ghost-secondary"><i class="fa-solid fa-bars"></i></button>
<button class="btn btn-square btn-ghost-dark rounded-circle"><i class="fa-solid fa-arrow-left"></i></button>

Responsiveness

You can use breakpoints .btn-square-{sm|md|lg|xl|xxl}-0 to decide from what screen size a button should have the square class.

<button class="btn btn-primary btn-square">XS</button>
<button class="btn btn-primary btn-square-sm">SM</button>
<button class="btn btn-primary btn-square-md">MD</button>
<button class="btn btn-primary btn-square-lg">LG</button>
<button class="btn btn-primary btn-square-xl">XL</button>
<button class="btn btn-primary btn-square-xxl">XXL</button>

Reset

You can also use the reset class .btn-square-0 to remove the square styling.

The reset class is also responsive with the .btn-square-{sm|md|lg|xl|xxl}-0 class which makes it useful for when you don't want to have a square button on smaller screen sizes.

<button class="btn btn-primary btn-square-0">XS</button>
<button class="btn btn-primary btn-square-sm-0">SM</button>
<button class="btn btn-primary btn-square-md-0">MD</button>
<button class="btn btn-primary btn-square-lg-0">LG</button>
<button class="btn btn-primary btn-square-xl-0">XL</button>
<button class="btn btn-primary btn-square-xxl-0">XXL</button>