Facts DSFACTS DS

State

Use state labels to inform users of an item's status. States come in a few variations that apply different colors. Use the state that best communicates the status or function.

Candidates and Committees status
Approved New Pending Rejected 
<span class="state me-3"><svg width="8" height="8" class="state-success" fill="currentcolor" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>Approved</span>
<span class="state me-3"><svg width="8" height="8" class="state-info" fill="currentcolor" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>New</span>
<span class="state me-3"><svg width="8" height="8" class="state-warning" fill="currentcolor" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>Pending</span>
<span class="state"><svg width="8" height="8" class="state-danger" fill="currentcolor" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>Rejected</span>
Statement Review status
Completed Not Reviewed Not Required 
<span class="state me-3"><svg width="8" height="8" class="state-success" fill="currentcolor" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>Completed</span>
<span class="state me-3"><svg width="8" height="8" class="state-warning" fill="currentcolor" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>Not Reviewed</span>
<span class="state me-3"><svg width="8" height="8" class="state-not-required" fill="currentcolor" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>Not Required</span>