CSS Components / Tags

Tags

The .c-tag component exposes a variety of styling options needed to support badges, pills, and tags. See the Garden React tags package for enhanced keyboard and event behavior.

.c-tag

Shapes

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.

.c-tag.c-tag--pill
T
8

Sizes

Tags may be sized small or large. Note that small tags will not display the avatar element (shown below).

.c-tag.c-tag--sm
.c-tag.c-tag--pill.c-tag--sm
T
8
.c-tag.c-tag--lg
.c-tag.c-tag--pill.c-tag--lg
T
100

Colors

Modifiers may be added to override the tag color. The component contains colors for each Garden palette hue.

.c-tag.c-tag--red
.c-tag.c-tag--crimson
.c-tag.c-tag--pink
.c-tag.c-tag--yellow
.c-tag.c-tag--lemon
.c-tag.c-tag--orange
.c-tag.c-tag--green
.c-tag.c-tag--mint
.c-tag.c-tag--lime
.c-tag.c-tag--blue
.c-tag.c-tag--azure
.c-tag.c-tag--royal
.c-tag.c-tag--grey
.c-tag.c-tag--purple
.c-tag.c-tag--fuschia
.c-tag
.c-tag.c-tag--kale
.c-tag.c-tag--teal

Elements

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.

.c-tag[tabindex=0] .c-tag__remove
.c-tag.c-tag--sm .c-tag__remove
.c-tag.c-tag--sm.c-tag--pill .c-tag__remove
.c-tag.c-tag--lg .c-tag__remove
.c-tag.c-tag--lg.c-tag--pill .c-tag__remove

The remove element displays correctly when applied to color-modified tags.

.c-tag--red .c-tag__remove
.c-tag--crimson .c-tag__remove
.c-tag--pink .c-tag__remove
.c-tag--yellow .c-tag__remove
.c-tag--lemon .c-tag__remove
.c-tag--orange .c-tag__remove
.c-tag--green .c-tag__remove
.c-tag--mint .c-tag__remove
.c-tag--lime .c-tag__remove
.c-tag--blue .c-tag__remove
.c-tag--azure .c-tag__remove
.c-tag--royal .c-tag__remove
.c-tag--grey .c-tag__remove
.c-tag--purple .c-tag__remove
.c-tag--fuschia .c-tag__remove
.c-tag .c-tag__remove
.c-tag--kale .c-tag__remove
.c-tag--teal .c-tag__remove

The tag may also contain a child avatar element. Pill-styled tags display round avatars.

.c-tag img.c-tag__avatar
.c-tag svg.c-tag__avatar
.c-tag.c-tag--lg img.c-tag__avatar
.c-tag.c-tag--lg svg.c-tag__avatar
.c-tag--pill img.c-tag__avatar
.c-tag--pill svg.c-tag__avatar
.c-tag--pill.c-tag--lg img.c-tag__avatar
.c-tag--pill.c-tag--lg svg.c-tag__avatar

States

Focus states are shown for the tags included in Garden. Remember to style an accompanying focus state along with custom background color overrides.

.c-tag--red.is-focused
.c-tag--crimson.is-focused
.c-tag--pink.is-focused
.c-tag--yellow.is-focused
.c-tag--lemon.is-focused
.c-tag--orange.is-focused
.c-tag--green.is-focused
.c-tag--mint.is-focused
.c-tag--lime.is-focused
.c-tag--blue.is-focused
.c-tag--azure.is-focused
.c-tag--royal.is-focused
.c-tag--grey.is-focused
.c-tag--purple.is-focused
.c-tag--fuschia.is-focused
.c-tag.is-focused
.c-tag--kale.is-focused
.c-tag--teal.is-focused

The hover state for the tag's remove icon is shown below.

.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered
.c-tag__remove.is-hovered

Truncation

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.

man braid synth
post-ironic bicycle rights
dollar toast mixtape la croix
key normcore food truck
hashtag
disrupt polaroid iceland four loko echo park cardigan wolf
dreamcatcher synth flexitarian

Playground

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.