component exposes a variety of styling options needed to support
badges, pills, and tags. See the Garden React
package for enhanced keyboard and event behavior.
Use pill or round class modifiers to shape a tag. Round tags are intended to contain a minimal number of characters. For example, you may want to use a round tag to show numbers 1-9 in a notification badge and then programmatically switch to a pill treatment for displaying 10+ notifications.
Tags may be sized small or large. Note that small tags will not display the avatar element (shown below).
Modifiers may be added to override the tag color. The component contains colors for each Garden palette hue.
The tag component supports a child remove element. An event listener can be attached to this element to remove the tag on click or delete keypress. Remember to use a focusable tag in order to support keyboard navigation to the tag.
The remove element displays correctly when applied to color-modified tags.
The tag may also contain a child avatar element. Pill-styled tags display round avatars.
Focus states are shown for the tags included in Garden. Remember to style an accompanying focus state along with custom background color overrides.
The hover state for the tag's remove icon is shown below.
Tags are designed to display a single line. Use the slider below to change the width of the text field container. Text within the tags will truncate with an ellipsis based on the available container width. Alternate title text is applied to the tag element in order to provide access to the truncated text. A min-width should be applied to contained tags (as it is here) with a value that is reasonable for the layout in question.
If you are visualizing the state of a tag with color only (success, failure, etc.) you should include additional accessibility messaging relating to the current state. This can be achieved in the same manner as our removal warning with the .u-visibility-screenreader class.
Additionally, for users that are vision impaired, but do not use a screen reader (color-blind), you should include a visual element along with the color based state.