Badges - Codebase

Inline badges

Codebase badges have no built-in positioning by default. So, they will appear inline with your text if you put the badge class on a <span> element, with their content on the text baseine. Also by default, badges do not have smaller text.

Example inline badge: 1

<span class="badge">1</span>

Another example:

Inbox

<a class="flex flex-middle bt-thin bb-thin p-cell t-decoration-none t-gray-700 hover:t-gray-900 hover:bg-gray-100" href="">
  <div class="mr-1">
    <!-- icon inbox -->
  </div>
  <div class="t-bold mr-1">Inbox</div>
  <div><span class="badge badge-secondary">17</span></div>
</a>

Superscript and subscript

For an inline superscript position, apply badge to a <sup> element (because superscript, the badge will be smaller).

Example superscript badge ²

For an inline subscript position, apply badge to a <sub> element (because subscript, the badge will be smaller).

Example subscript badge ₃

Inline <span class="badge">1</span>

Superscript <sup class="badge">2</sup>

Subscript <sub class="badge">3</sub>

Badge colors:

1 2 345 678 99+ 10 11

<span class="badge badge-warning">1</span>
<span class="badge badge-danger">2</span>
<span class="badge badge-success">345</span>
<span class="badge badge-info">678</span>
<span class="badge badge-primary">99+</span>
<span class="badge badge-secondary">10</span>
<span class="badge badge-tertiary">11</span>

Different sizes

Codebase badges are sized im em units, so that they grow according to the size of the text they are on. Besides applying badge to superscript and subscript, badge size can be controlled in other ways.

This text is bigger, and so is its badge ¹

<p style="font-size: 36px">This text is bigger, and so is its badge <sup class="badge">1</sup></p>

If you want a badge to be smaller than ABC, like this: ABC – that can be done with t-sm.

<span class="badge">ABC</span>

<span class="badge t-sm">ABC</span>

See inline text utilities

Over the corners of parent elements

Give the containing element the relative class, so that the following absolute positioned badges will be in the correct places.

<button>
  <!-- text or icon -->
  <span class="badge badge-top-right badge-warning t-sm">99+</span>
</button>