Version 3.0.6


Tags are small and adaptive labels used used to indicate type, status, or codes. Tags can be static or dynamic (e.g. able to be deleted/removed).

The default tag is a clickable, gray link. They appear as small button-like objects on the page.

<button class="btn-tag">Tag</button>

Color-coded tags are static and used in our apps to indicate data types to help users visually sort long lists of data (e.g. Type of forms within a list of forms - Contribution, Advocacy, Petition, etc.)

<button class="tag-static teal">Teal</button>
<button class="tag-static violet">Violet</button>
<button class="tag-static yellow">Yellow</button>
<button class="tag-static pink">Pink</button>
<button class="tag-static blue">Blue</button>
<button class="tag-static red">Red</button>
<button class="tag-static indigo">Indigo</button>
<button class="tag-static green">Green</button>
<button class="tag-static orange">Orange</button>
<button class="tag-static gray">Gray</button>
<button class="tag-static cyan">Cyan</button>
<button class="tag-static lime">Lime</button>
<button class="tag-static grape">Grape</button>

Search Results

Powered by