Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@nice-digital/nds-tag

1.0.21-alpha.0 • Public • Published

@nice-digital/nds-tag

Tag component for the NICE Design System

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>
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:

@import "~@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>

Keywords

Install

npm i @nice-digital/nds-tag

DownloadsWeekly Downloads

43

Version

1.0.21-alpha.0

License

MIT

Unpacked Size

24.3 kB

Total Files

9

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar