Tag

When to use the tag component

Categorize content.

Use tags to help users quickly identify and categorize content by topic, theme, or type.

Show status.

Use tags to indicate the status of an item, such as "New," "Updated," or "Featured."

Filter labels.

Use tags in conjunction with filtering functionality to show active filters or available categories.

When to consider something else

Actions require a button.

If clicking the element should perform an action like submitting a form or navigating to a new page, use a button or link instead.

Displaying counts or quantities.

If you need to show a numerical count or badge, consider using a badge component instead.

Usability guidance

Keep text short.

Tag text should be concise and limited to one or two words. Longer text can make tags difficult to scan.

Use consistent colors.

If using multiple tags to represent different categories, use consistent colors for each category to help users quickly identify them.

Use sentence case.

Write tag text in sentence case for readability. Avoid using all uppercase letters.

Accessibility guidance

Ensure sufficient color contrast.

The tag text must have a contrast ratio of at least 4.5:1 against the tag background color to meet WCAG 2.1 AA standards.

Do not rely on color alone.

If tags are used to convey meaning (such as status), ensure that the meaning is also conveyed through text, not just color.

Tags are not interactive by default.

The default tag component is not a focusable or interactive element. If you need an interactive tag, wrap it in a button or link element.

USWDS Documentation

For more guidance, view the USWDS Tag Component Documentation.