component

Pills

Pills provide a visually consistent way to indicate state throughout our applications.

Design Complete

We use pills to indicate the status of a job application, an opportunity, or a search.

Elongated pill - Application status

Advancing

  • GS12: Received
  • Reviewed
  • Referred
  • Selected
  • Hired

Paused

  • In Progress
  • Incomplete

Stopped

  • Canceled
  • GS14: Not Referred
  • GS14: Not Selected
  • GS14: Not Hired

Unknown

  • Unknown
Elongated pill - Opportunity status
Draft
Open
Not open
In progress
Completed

Usability

When to use
  • Use pills when you need to indicate the state of an object/component
When to consider something else
  • Do not use pills for non-state or status.
Stocky pill - Search

Usability

When to use
  • Use this variation of pill for indicating the state of a search or transaction (transient state).
  • The green variation here represents a value that came from the user's profile preferences. The gray variation is a value matches the value of a filter that the user has applied to their search results.
When to consider something else
  • Do not use pills for non-state or status.