component
Pills
Pills provide a visually consistent way to indicate state throughout our applications.
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
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.