@zendeskgarden/css-tags

This package provides styling for tag components needed to support badges, pills, and labels.

Installation

npm install @zendeskgarden/css-tags

Usage

Once installed, tag CSS can be accessed via postcss-import.

@import '@zendeskgarden/css-tags';

Tag CSS is intended to enhance the following HTML.

<div class="c-tag">TAG</div>

Modifications

See http://zendeskgarden.github.io/css-components/tags/ for additional tag component modification classes.

Remove

Use the following HTML to support the addition of a remove icon. Note the use of tabindex to allow the tag to receive keyboard focus, but prevent tabbing to the remove button.

To make this accessible to all users we have added a hidden description that is visible to screen readers.

<div class="c-tag" tabindex="0">
  <span>TAG</span>
  <div class="u-visibility-screenreader">Press delete to remove this tag.</div>
  <button class="c-tag__remove" tabindex="-1"></button>
</div>

Avatar

Use the following HTML to support the addition of a tag avatar.

<div class="c-tag">
  <svg class="c-tag__avatar" aria-label="Avatar description">...</svg>
  <span>TAG</span>
</div>

Behavior

See the <Label> component for intended mouse and keyboarding behaviors.