Buttons

Baselayer form elements have simple background, hovers and focus styling (border is set to 1px solid transparent).

Button types and link “pseudo-buttons”

Button Link “button”

<button type="button" name="button">Button</button>

<input type="button" name="input" value="Input Button">

<input type="submit" name="submit" value="Submit Button">

<input type="reset" name="reset" value="Reset Button">

<a class="btn" href="">Link “button”</a>

Notes:

1. Form inputs, textareas, buttons, and the btn class, have font-size: inherit. This means their font sizes can be modified by any font-size limit around the button in Baselayer.
2. The font-family of form elements, buttons, btn is controlled by var(--base) (default is sans-serif).
3. The btn class doesn’t include the input focus ring (that is set only on form inputs, textareas, and the <button> tag). But if the btn utility class is used on an <a href=""> link tag, then will get the link focus ring insead (this is only visible when keyboard-tabbing or using assistive tech).

Full-width buttons

In Baselayer, buttons are pre-styled with display: inline-flex and centering and middling flexbox alignment.

So, if you want a button to stretch full-width, you can add class="w100%" or you can override the inline-flex by adding class="flex". (Do not use class="block" on a button (or .btn) because that will override its inline flexbox.)

Button

<button class="w-100%" type="button" name="button">
  Button
</button>

Also, since buttons already have display: inlne-flex, this means that adding the flex-space-between class to the button will also stretch the button if you have more than one item inside the button, such as the descriptive text plus an icon.

For example, here’s a full-width button with a down-caret icon and spacing controlled by flexbox:

Button

<button class="flex-space-between" type="button" name="button">
  Button
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></polyline></svg>
</button>

Down-caret SVG icon from Phosphor Icons, with color set by currentColor, and width and height 16px — same as font size (1rem).

Another way to control the width of a button is from outside of it — by wrapping the button in a grid so that the button adopts the dimensions of a grid item.

Adding colors

Border, background, and text color utilities can be used.

Label

<label for="example-input-text">Label</label>

<input class="b-2 b-red" type="text" id="example-input-text" placeholder="Enter some text here">

<input class="b-2 b-green" type="text" id="example-input-text" placeholder="Enter some text here">

When colorizing buttons, remember to set their hover: hover state shades too.

Button Button Button Link “button”

<!-- Default button -->
<button type="button" name="button">Button</button>

<!-- Blue button -->
<button class="bg-blue bg-600 hover:bg-700" type="button" name="button">Button</button>

<!-- Amber button -->
<button class="t-black hover:t-black bg-amber bg-400 hover:bg-500" type="button" name="button">Button</button>

<!-- Green outline (a.k.a. ghost) link “button” -->
<a class="btn b-green hover:b-700 bg-transparent bg-600 t-green t-600 hover:t-white hover:bg-green hover:bg-700" href="#/">Link “button”</a>

Buttons with icons

In Baselayer, buttons are pre-styled with display: inline-flex and centering and middling flexbox alignment. So, all you need to do is add an icon and it will all line up.

Search

<button type="button" name="button" class="gap-1">
  Search
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor">
    <!-- SVG icon -->
  </svg>
</button>

Baselayer CSS buttons works well with SVG icons, e.g. Phosphor icons. Set the width and height of the icon to be e.g. 16px, 20px, or 24px. Set the fill colors to be currentColor so that it can be controlled by the CSS.

If you are combining text with an icon, you may sometimes need to add some space using gap-1 within your button (see flex layouts). That’s the easiest way. Alternatively, you could put   between your button text and icon.

For icon-only buttons, add the CSS class btn-icon and have only a single character or icon in the button — this will make the button to be a square.

Button  1 

Pill buttons

The r-pill class on a square icon button will make it circular. (See decoration: rounded corners.)

Button 

<button class="r-pill" type="button" name="button">Button</button>

<button class="btn-icon r-pill" type="button" name="button">I</button>

Button sizes

Buttons (and the btn utility) will resize according to the font-size of the block that they are inside.

You can also use the typographic size classes t-small and t-big to modify buttons directly.

Button Button Button

<form class="flex flex-middle gap-1">
  <button type="button" name="button" class="t-small">Button</button>
  <button type="button" name="button">Button</button>
  <button type="button" name="button" class="t-big">Button</button>
</form>

Button x-axis padding is 1em, so that it will also respond to the text size of the button.

Stretch buttons

You can increase the x-axis padding (using the responsive px-2 or px-3) to make a button more impressive:

Button Button Button

<button type="button" name="button">Button</button>

<button class="px-2" type="button" name="button">Button</button>

<button class="px-3" type="button" name="button">Button</button>