Pill

Use mr-pill on the element and a namespaced modifier such asmr-pill--info when a semantic color variant is needed.

Example usage

<span class="mr-pill">Tech</span>
<span class="mr-pill mr-pill--secondary">Design</span>
<span class="mr-pill mr-pill--positive">Success</span>
<span class="mr-pill mr-pill--negative">Error</span>
<span class="mr-pill mr-pill--warning">Warning</span>
<span class="mr-pill mr-pill--info">Info</span>
<span class="mr-pill mr-pill--help">Help</span>

Rendered example

Layout around multiple pills is intentionally handled by the layout API; combine pills with mr-cluster when they need wrapping horizontal layout.