@nice-digital/nds-tag

Tag component for the NICE Design System

• @nice-digital/nds-tag - Installation - Usage - React - Props - SCSS - HTML

Installation

Install Node, and then:

npm i @nice-digital/nds-tag --save

Usage

React

Import the Tag component from the package and use within JSX:

import React from "react";
import { Tag } from "@nice-digital/nds-tag";

<Tag success>Tag content</Tag>;
<Tag success flush>
	Tag content
</Tag>;

Props

children

• Type: ReactNode (required)

The body content of the tag. Can receive any markup.

<Tag>
	<p>Here is some addition content.</p>
</Tag>

alpha

• Type: boolean

Property to denote alpha service phase. Adds class to apply styling.

<Tag alpha>alpha</Tag>

beta

• Type: boolean

Property to denote beta service phase. Adds class to apply styling.

<Tag beta>beta</Tag>

live

• Type: boolean

Property to denote live service phase. Adds class to apply styling.

<Tag live>live</Tag>

isNew

• Type: boolean

Property to denote the status of guidance. Adds class to apply styling.

<Tag isNew>isNew</Tag>

consultation

• Type: boolean

Property to denote the status of guidance. Adds class to apply styling.

<Tag consultation>consultation</Tag>

updated

• Type: boolean

Property to denote the status of guidance. Adds class to apply styling.

<Tag updated>updated</Tag>

impact

• Type: boolean

Increases size, use sparingly, e.g. within phase banners. Adds class to apply styling.

<Tag impact>impact</Tag>

flush

• Type: boolean

Reduces horizontal padding inside tag. Adds class to apply styling.

<Tag flush>flush</Tag>

outline

• Type: boolean

Creates a tag with a border. Adds class to apply styling.

<Tag outline>outline</Tag>

caution

• Type: boolean

Applies an caution state. Adds class to apply styling.

<Tag caution>caution</Tag>

info

• Type: boolean

Applies an info state. Adds class to apply styling.

<Tag info>info</Tag>

error

• Type: boolean

Applies an error state. Adds class to apply styling.

<Tag error>error</Tag>

success

• Type: boolean

Applies an success state. Adds class to apply styling.

<Tag success>success</Tag>

remove

• Type: ReactNode

An element to render as a the button/link if this is a removeable tag. Usually an anchor or a custom Link component when using a router. It will get passed a className prop of tag__remove automatically. It's up to you to provide relevant visually hidden link text for the anchor. See the example below:

<Tag
	outline
	remove={
		<a href="#" className="test">
			<span className="visually-hidden">Remove this tag</span>
		</a>
	}
>
	Some tag text
</Tag>

other props

Other props will be cascaded to the containing span.

<Tag data-hidden="true">Other props</Tag>

SCSS

If you're not using React, then import the SCSS directly into your application by:

@forward '@nice-digital/nds-tag/scss/tag';

HTML

If you're not using React, then include the SCSS as above and use the HTML:

<span class="tag tag--flush tag--alpha">Alpha</span>