Tag

A tag allows the user to interact with or dismiss a status or classification.

Anatomy

1. Tag Container - an outline or background sets the tag apart from adjacent text.
2. Label - the tag's label conveys a status or classification.
3. Dismiss Indicator - an icon that appears when the tag is dismissible.

Usage

Use a tag to communicate status, denote active filter selection(s), or as a content tag.

• A tag may or may not be associated with another component. When it is, it should be placed as close as possible to the component it is referencing.

Do

• Do use a tag if this component should be dismissible or if users need to select or interact with it for any reason.

Don't

• Don’t use a tag to communicate a temporary or permanent state if users cannot interact with or dismiss it. Use a badge instead.

Caution

• In most contexts, a series of several tags can be overwhelming and create visual clutter. Use tags sparingly (1–3 tags) wherever possible.
• A tag should be styled with minimal padding around the text inside the container to distinguish it from a button.

React API

We expose one component for the tag API, the Tag.

Tag

The Tag component extends the React.HTMLAttributes<HTMLElement> interface and renders either as a <span> or <button>, depending on its configuration.

• When dismissible, the tag will render as a <span> with a dismiss <button> inside of it.
• When the tag contains a link (Link or a[href]), it will render as a <span> to ensure that the link is clickable.
• The rest of the time, the tag will render as a <button> and can be reacted to by attaching an onClick callback.

import { Tag } from '@wwnds/react';

Live Editor

<Tag>Norton Design System</Tag>

Result

Loading...

Name	Description	Type
color	The tag color family.	SystemColors
dismissible	Indicates whether tag can be dismissed.	boolean
baseName	The base class name according to BEM conventions.	string
contentsClass	The className for the span that wraps children.	string
dismissClass	The className for the dismiss button.	string
onDismiss	Callback function that is called when the dismiss button is clicked.	(() => void)