Official website

of the Commonwealth of Pennsylvania

Components

Tag

Tags are small elements that help label, organize, categorize, or filter content using keywords.

Overview

Tags are small elements that contain keywords. They can help users tell the difference between similar content.

Tags may be purely informational or dismissable. Dismissable tags allow the user to close or remove a tag by selecting an x button.

You can use multiple tags, but avoid stacking them vertically.

Usage

When to use

  • Use tags for large collections of content that fits into defined categories.
  • Use tags to help users identify the most relevant content for them. For example, consider tags for publication dates or audience types.
  • Use the close button variant when a user can remove a filter by activating the button.

When not to use

Don't use tags for unique identifiers. Tags help users to sort and group content. They're only useful when they help the user compare information.

Accessibility

  • Provide brief, clear labels for each tag.
  • Avoid relying on color to communicate the meaning of a particular tag.

Related components

We want to hear from you

This is a pre-release version of Keystone Design System. If you're a beta tester, we want your bug reports, questions, and feedback.

 

Complete our form to share your thoughts—just log in with your PA.gov email. We'll review and consider every response.