Buttons

Codebase btn-* classes enable you to apply button styles to buttons, input-buttons, and hyperlinks.

Basic buttons

Button – the Codebase basic (classless) button

– input button

Hyperlink – hyperlink dressed as a button using the btn class.

<button>Button</button>

<input value="Input" type="submit">

<a class="btn" role="button" href="#/">Hyperlink</a>

Notes:

1. Both <button> and <input type="submit"> etc. are already buttons, receiving the Codebase classless button styling. They don’t need the btn class. (But it will do no harm if you include it.)
2. Following recent updates in browsers, since Codebase v.5.2.5 the btn class, used for styling <a href=""> links, has the same focus ring as buttons and inputs. See Accessibility: Focus ring styling.

UI colors

The following UI colors conform to WCAG 2.1 Level AA guidelines for readability: color contrast ratio 4.5:1 or better for text. See Accessibility: Accessible UI colors.

Success Warning Danger Info Primary Secondary Tertiary

<button class="btn-success">Success</button>
<button class="btn-warning">Warning</button>
<button class="btn-danger">Danger</button>
<button class="btn-info">Info</button>
<button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-tertiary">Tertiary</button>

States

:disabled or disabled / Normal / :hover / :active or active

<button disabled>Default disabled</button>
<button>Default</button>
<button class="active">Default active</button>

<!-- Or -->

<a class="btn disabled" href="javascript:void(0)">Default disabled</a>
<a class="btn">Default</a>
<a class="btn active">Default active</a>

Default disabled Default Default active

Success disabled Success Success active

Warning disabled Warning Warning active

Danger disabled Danger Danger active

Info disabled Info Info active

Primary disabled Primary Primary active

Secondary disabled Secondary Secondary active

Tertiary disabled Tertiary Tertiary active

Full-width buttons

Buttons are normally inline elements. However, if you want a button to be a block element, simply add block layout utility class. Alternatively, using w-100% utility class will expand the button to the full width of its containing element – achieving the same look.

btn.block:

Block button

Hyperlink

<button class="block">Block button</button>

<a class="btn block" role="button" href="#/">Hyperlink</a>

btn.w-100%:

100% width button

Hyperlink

<button class="btn-primary w-100%">100% width button</button>

<a class="btn btn-primary w-100%" role="button" href="#/">Hyperlink</a>

Using the w-100% flex-start class instead of block will make the button full width, but the button text will not be centered. This may be useful if you need to have a button in a menu.

100% width button

Hyperlink

<button class="btn-primary w-100% flex-start">100% width button</button>

<a class="btn btn-primary w-100% flex-start" role="button" href="#/">Hyperlink</a>

Here’s something else you can do: if you have both text and an icon in the button, you can use flex-space-between instead of flex-start, to push the text and icon to opposite ends of the full-width button:

100% width button

<button class="btn-primary w-100% flex-space-between">
  100% width button 
  <!-- icon caret down -->
</button>

Pills

You can changed the rounded corners of buttons using rounded corner utilities.

Pill-shaped button

<button class="btn-secondary rounded-pill">Pill-shaped button</button>

Text and icons

Add SVG or icon-font icons from anywhere. (The Codebase docs demonstrate SVG icons using Phosphor Icons.

For SVG icons, set the height to match your line height (1.5rem = 24px). And within the SVG itself, set stroke="currentColor" to that it inherits the Codebase UI element text color.

<button class="btn-success">
  <!-- Icon checkmark -->
  OK
</button>

Notes:

1. Codebase buttons already have built in display: inline-flex; with flex items centered and middled. This should automatically line up text and icons. However, if you use an icon font, you may find it necessary to put the icon in its own <span> or <i> tag within the button.
2. In a situation where you have more than one button in a row (e.g. you are creating a button group or tool bar) and you are using icons and text in combination (or, different text sizes in combination), buttons can become misaligned because the text and icons have different baselines. You can solve this problem by wrapping groups of buttons in flex flex-middle.

Icons only

Add btn-icon to get square buttons.

Since btn-icon renders a square, you can also add rounded-full to make it a circle.

Button sizes

Note: since Codebase 5.2.3, smaller buttons have smaller text, and larger buttons have larger text.

<a href="#/" class="btn btn-sm">Small</a>
<a href="#/" class="btn">Default</a>
<a href="#/" class="btn btn-lg">Large</a>

Using btn-icon at these different button sizes will maintain its square shape. And maintain a circle shape if used in combination with rounded-full:

A B C

<button class="btn btn-sm btn-icon rounded-full">A</button>
<button class="btn btn-icon rounded-full">B</button>
<button class="btn btn-lg btn-icon rounded-full">C</button>

Note: The font-size change for smaller or larger buttons will affect icon fonts but it does not affect SVG icons.

   

If you want smaller or larger icons, then you must make them smaller or larger yourself. Examples using Phosphor Icons at 18px, 24px, and 36px size:

Combos

A row of buttons would touch each other (buttons are ordinarily inline elements), unless you leave spaces between them. Leave no spaces if you want the buttons to touch each other, as in a “tool bar”. Or if you find it necessary, wrap them in a flex

You can remove some of the rounded corners using some unrounded utilities (see rounded corners).

<button class="btn-icon unrounded-right">
  <!-- left-align icon -->
</button>
<button class="btn-icon unrounded">
  <!-- center icon -->
</button>
<button class="btn-icon unrounded-left">
  <!-- right-align icon -->
</button>

Go large – to grab people’s attention:

<input 
  id="email-example" 
  class="form-element-lg b-thick b-success rounded-pill unrounded-right p-3 t-lg bg-green-200" 
  name="examplename" 
  placeholder="Your email" 
  type="email"
>
<button 
  aria-label="Submit" 
  type="submit" 
  class="btn btn-success btn-lg b-thick b-success rounded-pill unrounded-left p-3 t-lg"
>Subscribe</button>

Go small – to fit a form into a menubar, or into a table cell:

<input 
  type="search" 
  class="form-element-sm b-primary unrounded-right bg-purple-100" 
  id="site-search" 
  name="site-search" 
  autocomplete="off" 
  aria-label="" 
  placeholder="Search"
>
<button 
  aria-label="Search"
  class="btn btn-primary btn-icon btn-sm unrounded-left"
>
  <!-- Search icon -->
</button>

See form elements and form utilities

Outline buttons

Outline buttons (sometimes called “ghost buttons”) can be created using utility classes.

Do this:

1. Put bg-transparent to the button, in addition to e.g. btn-success
2. Put a text color on the button, to override the UI white (in this example, t-success).

The button border and the hover states are taken care of already (in this example, by btn-success).

Example:

btn btn-success bg-transparent t-success:

Find out more 

<a class="btn btn-success flex bg-transparent t-success" href="#/">Find out more →</a>