Demonstration and documentation

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