Tag

Tags are used to represent categories, keywords, or general labels.

To display status or version, use the badge component.

Import

• Tag: The wrapper for all the tag elements
• TagLabel: The label for tag's text content.
• TagIcon: The icon for the tag
• TagCloseButton: The close button for the tag.

import { Tag, TagIcon, TagLabel, TagCloseButton } from '@outfitio/outkit';

Usage

Tag size

Tag with icon

Tag with close button

Accessibility

• If the tag is clickable, ensure it has active, focus and hover states.

Best Practice

• When displaying a user-defined tag, include the tag icon.
• When using tags to display a filter, and there is more than one type of filters that can be applied, clearly label the type of filter being applied. E.g., use the labels "Status: Approved" and "Team: Central Marketing", instead of "Approved" and "Central Marketing".

Props