Badges and buttons < EBI Pattern library

Badges and buttons

All buttons are badges, but not all badges are buttons

Rendered
HTML
CSS
Info

The badge is one of the most common atoms in the ecosystem and has several variants.

Basic badge

Sample

Basic badge - tiny

Sample

Label badge

While sharing a very similar look to the basic badge, this label has less padding and is meant to attract less attention. Great for tags.

Sample

Icon badge

Sample Sample to the right

Tile badge

Square or rectangle, these badges command more visual attention.

Sample

Readmore badge

Typically we recommend you construct more complex atoms out of other atoms, but recognising that "read more" buttons are common you can add the arrow with .readmore.

The full article

Badges and buttons HTML

<p>The badge is one of the most common atoms in the ecosystem and has several variants.</p>

<h3>Basic badge</h3>
<a class="button" href="#">Sample</a>

<h4>Basic badge - tiny</h4>
<a class="button tiny" href="#">Sample</a>

<h4>Label badge</h4>
<p>While sharing a very similar look to the basic badge, this label has less padding and is meant to attract less attention. Great for tags.</p>
<a class="label" href="#">Sample</a>

<h3>Icon badge</h3>
<a class="button" href="#"><i class="icon icon-generic" data-icon="P"></i> Sample</a>
<a class="button" href="#">Sample to the right <i class="icon icon-generic" data-icon="P"></i></a>

<h3>Tile badge</h3>
<p>Square or rectangle, these badges command more visual attention.</p>
<a class="button" href="#"><h3 class="icon icon-generic white-color" data-icon="P"></h3> Sample</a>

<h3>Readmore badge</h3>
<p>Typically we recommend you construct more complex atoms out of other atoms, but recognising that "read more" buttons are common you can add the arrow with <code>.readmore</code>.</p>
<a class="button readmore" href="#">The full article</a>

<!-- <h3>Wormhole badge</h3>
<p>These are core to the Wormhole molecule and feature a prominent visual that links the user to another part of the site, or beyond.</p>
<a class="button" href="#">Sample</a> -->

Badges and buttons Style

You can find the original source of the CSS as .scss