Buttons

Codebase button classes can be applied to button tags, input-button tags and hyperlink anchor tags.

Default Buttons

Button – button .btn

– input button .btn

Hyperlink – hyperlink .btn

Block width button using the .block layout utility. See layout utilities.

Block width button

Button Colors

Default – .btn

Primary – .btn.primary

Secondary – .btn.secondary

Warning – .btn.warning

Success – .btn.success

Danger – .btn.danger

Button States

Normal / :hover :focus :active .btn-active / :disabled .btn-disabled

Default Default active Default disabled

Primary Primary active Primary disabled

Secondary Secondary active Secondary disabled

Success Success active Success disabled

Warning Warning active Warning disabled

Danger Danger active Danger disabled

Small, Default and Large Buttons

Add .small for a smaller button, or .big for a bigger button. See text utilities.

Small Default Big

The smaller form button size has been designed for fitting within menus and menubars. In that context, give it a margin class .m-1e to position it correctly.

Buttons with Icons

Icons (characters, pictograms or emojis) can be included in buttons:

OK Archive Go Really Reset Menu

Examples in these docs use Font Awesome icons.

Square Icon Buttons

.btn-icon – ensures you get square buttons when only a single character, symbol or icon is present within the button:

Add .big for a larger icon button (both the button and the icon are made big):

Rounded Icon Buttons

Example .btn.pill

Using .btn-icon together with .pill yields a circular button:

Buttons with Dropdowns

The dropdown component can be used with buttons. See the dropdown component for explanation.

Buttons and Forms

Codebase buttons and form elements play well together:

Signup

<form class="mb-3e">
  <input id="signup-example-1" name="examplename" placeholder="Name" type="text">
  <input id="signup-example-2" name="examplename" placeholder="Email" type="email">
  <button class="btn" type="submit">
    Signup
  </button>
</form>

Use a .small search input and .small button for fitting a search form into a megamenu:

Both form element and buttons can have .block layout utility so you can do things such as this:

<form>
  <input class="mb-1e block" id="signup-example-3" name="examplename" placeholder="Name" type="text">
  <input class="mb-1e block"  id="signup-example-4" name="examplename" placeholder="Email" type="email">
  <button class="btn block" type="submit">
    Signup
  </button>
</form>

In the example above, .mb-1e bottom padding has also been added to the form inputs. See spacing utilities.

---