Badges

Badges help inform customers on the state of a study. They also communicate and indicate number-driven information.

Variants

content 100 new notification
<span class="badge">content</span>
<span class="badge badge--muted">100</span>
<span class="badge badge--green">new</span>
<span class="badge badge--red">notification</span>
content 100 new notification
<badge>content</badge>
<badge type="muted">100</badge>
<badge type="success">new</badge>
<badge type="error">notification</badge>

Description

We use $midnight-light for our primary badge and $midnight-xlight for our muted badges. Our primary badge provides focus and is used to convey top-level information like study count and limitations. Our muted badge is subtle and is used to convey supplementary information and attributes.

Do

  • Place badges after content
  • Apply tooltips for more context

Don't

  • Add a lot of content to the badge, try to keep content below 24 characters
  • Include two badges next to each other unless absolutely necessary

Indicators

Unwatched

Approved

Pending

<p class="indicator-wrap m-0x">
  <span class="indicator indicator--new mr-1x" role="presentation"></span>
  Unwatched
</p>
<p class="indicator-wrap m-0x">
  <span class="indicator indicator--approved mr-1x" role="presentation"></span>
  Approved
</p>
<p class="indicator-wrap m-0x">
  <span class="indicator indicator--pending mr-1x" role="presentation"></span>
  Pending
</p>

Description

We use this pattern to indicate various meanings. indicator--new is used for announcing unwatched sessions. indicator--approved is used to notify a customer that a draft has been approved. indicator--pending is used to update a customer on the progress of a draft.

Do

  • Ensure the content matches the right indicator dot

Don't

  • Place two indicator dots next to each other

Accessibility

  • Needs to have a minimum contrast ratio of 4.5
  • Indicators must have a role="presentation" applied to them