Status Badge Component
Badges are small, inline elements used to highlight key information such as status, categories, counts, or labels. Quickly convey the state of content with distinct visual cues. Use the available alert colors to help users instantly understand the context. Badges work great when combined with cards, tables, or headings.
Component Fields
Status Text
The text that appears inside the badge. Keep this text brief and clear. Typically one to two words, such as success, in process, or cancelled or a number.
Maximum of 32 characters
Status Type
This will determing the color of your badge, but it also provides additional context. Use the colors to convey what the badge represents.
- Success - Green
- Info - Blue
- Warning - Yellow
- Danger - Red
- Neutral - Gray
- WKU Red / Theme Color
Examples
Example 1
Examples of the different style status badged available.
- Status Text: Name of Badge Style, see options above
- Status Type: Example of each, see options above
Example 2
Use badges with headings to create tags or sub-headings for content. Notice how badges scale with heading sizes.
Example Heading 2 New
Example Heading 3 New
Example Heading 4 New
Example Heading 5 New
- Status Text: New
- Status Type: Neutral - Gray
Event Title Cancelled
- Status Text: Cancelled
- Status Type: Danger - Red
Upcoming Events 3
- Status Text: 3
- Status Type: Neutral - Gray
Example 3
Badges are great for labelling cards for quick recognition.
Example Card
- Status Text: Complete
- Status Type: Success - Green
Example Card
- Status Text: In Progress
- Status Type: Info - Blue
Example Card
- Status Text: Under Review
- Status Type: Yellow - Warning
Example Card
- Status Text: Declined
- Status Type: Danger - Red
Example 3
Similar to cards, badges can provide context and labels to content in tables. Remember to use table headers and styles to ensure they remain accessible.
| Title | Date | Department | Status |
|---|---|---|---|
| Example 1 | Mar 21, 1906 | Test | Complete |
| Example 2 | Mar 21, 1906 | Test | In Progress |
| Example 3 | Mar 21, 1906 | Test | Under Review |
| Example 4 | Mar 21, 1906 | Test | Declined |
- Status Text: Matches Badge Style, see options above
- Status Type: Example of each, see options above
Need Assistance?
The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.
Some of the links on this page may require additional software to view.