Tag

A label attached to something for the purpose of identification or additional information.

AnatomyPermalink to: Anatomy

Label
Icon (Optional)
Counter (Optional)
Container

UsagePermalink to: Usage

A Tag is a label attached to something for the purpose of identification or additional information, and comes in different variants to indicate different levels of importance or meaning.

The Tag must never be clickable.

ExamplesPermalink to: Examples

VariantsPermalink to: Variants

Open

import { Tag } from "@peakon/bedrock/react/tag";
import { Inline } from "@peakon/bedrock/react/layout";

function Snippet() {
  return (
    <Inline spacing={8} alignBlock="center">
      <Tag label="Neutral tag (default)" />
      <Tag variant="info" label="Info tag" />
      <Tag variant="warning" label="Warning tag" />
      <Tag variant="ai" label="AI tag" />
      <Tag variant="positive" label="Positive tag" />
      <Tag variant="negative" label="Negative tag" />
    </Inline>
  );
}

Variant	Description
neutral	Used for low emphasis (default variant)
info	Used for high emphasis
warning	Used for even higher emphasis, eg. to indicate a warning
ai	Used to indicate a relation to AI
positive	Used to indicate a positive or successful state
negative	Used to indicate a negative or error state

SizesPermalink to: Sizes

Tag support three sizes: small, medium (default) and large.

Open

import { Tag } from "@peakon/bedrock/react/tag";
import { Inline } from "@peakon/bedrock/react/layout";

function Snippet() {
  return (
    <Inline spacing={8} alignBlock="center">
      <Tag label="Small tag" size="small" />
      <Tag label="Medium tag (default)" />
      <Tag label="Large tag" size="large" />
    </Inline>
  );
}

With IconPermalink to: With Icon

It is possible to add an icon to the Tag that scales with the size.

Open

import { Tag } from "@peakon/bedrock/react/tag";
import { Inline } from "@peakon/bedrock/react/layout";
import { SystemIcon } from "@peakon/bedrock/react/assets/SystemIcon";

function Snippet() {
  return (
    <Inline spacing={8} alignBlock="center">
      <Tag
        label="Small tag"
        icon={<SystemIcon name="utility-favorite" />}
        size="small"
      />
      <Tag label="Medium tag" icon={<SystemIcon name="utility-favorite" />} />
      <Tag
        label="Large tag"
        icon={<SystemIcon name="utility-favorite" />}
        size="large"
      />
    </Inline>
  );
}

For the ai variant, use the sparkle icon:

Open

import { Tag } from "@peakon/bedrock/react/tag";
import { Inline } from "@peakon/bedrock/react/layout";
import { SystemIcon } from "@peakon/bedrock/react/assets/SystemIcon";

function Snippet() {
  return (
    <Inline spacing={8} alignBlock="center">
      <Tag
        variant="ai"
        label="Small AI tag"
        icon={<SystemIcon name="utility-ai-sparkle" />}
        size="small"
      />
      <Tag
        variant="ai"
        label="Medium AI tag"
        icon={<SystemIcon name="utility-ai-sparkle" />}
      />
      <Tag
        variant="ai"
        label="Large AI tag"
        icon={<SystemIcon name="utility-ai-sparkle" />}
        size="large"
      />
    </Inline>
  );
}

With CounterPermalink to: With Counter

The Tag supports a counter that scales with the size.

Open

import { Tag } from "@peakon/bedrock/react/tag";
import { Inline } from "@peakon/bedrock/react/layout";

function Snippet() {
  return (
    <Inline spacing={8} alignBlock="center">
      <Tag label="Small tag" count={999} size="small" />
      <Tag label="Medium tag" count={999} />
      <Tag label="Large tag" count={999} size="large" />
    </Inline>
  );
}

Category Group TagPermalink to: Category Group Tag

For category groups there's custom tailored tags, <CategoryGroupTag />, that will render the correct icon and colors based on the group prop (see list of groups here).

Since Bedrock does not have any translation, you will have to pass in the label of the group yourself via the label prop.

Open

import { CategoryGroupTag } from "@peakon/bedrock/react/tag";
import { Inline } from "@peakon/bedrock/react/layout";

function Snippet() {
  return (
    <Inline spacing={8}>
      <CategoryGroupTag
        group="ancc_magnet_nursing_excellence"
        label="ANCC Magnet Nursing Excellence"
      />
      <CategoryGroupTag group="covid19" label="COVID-19" />
      <CategoryGroupTag
        group="diversity_inclusion"
        label="Diversity and Inclusion"
      />
      <CategoryGroupTag group="engagement" label="Engagement" />
      <CategoryGroupTag
        group="environmental_social_governance"
        label="Environment, Social and Governance"
      />
      <CategoryGroupTag group="exit" label="Exit" />
      <CategoryGroupTag group="health_wellbeing" label="Health and Wellbeing" />
      <CategoryGroupTag group="onboarding" label="Onboarding" />
      <CategoryGroupTag group="open_ended" label="Open ended" />
      <CategoryGroupTag group="other" label="Other" />
      <CategoryGroupTag
        group="transformation_change"
        label="Transformation and Change"
      />
      <CategoryGroupTag group="values" label="Values" />
    </Inline>
  );
}

Props TablePermalink to: Props Table

TagPermalink to: Tag

Props extend from HTML Span Element(external link)

Name	Type	Description	Default	Required
`ref`	`HTMLSpanElement`	Forwards a ref to the Tag.	`—`	No
`label`	`string`	The label for the Tag.	`—`	Yes
`variant`	`neutral \| info \| warning \| ai \| positive \| negative`	The variant of the Tag.	`neutral`	No
`size`	`small \| medium \| large`	The size of the Tag.	`medium`	No
`icon`	`React.ReactNode`	An optional icon for the Tag.	`—`	No

CategoryGroupTagPermalink to: CategoryGroupTag

Props extend from HTML Span Element(external link)

Name	Type	Description	Default	Required
`ref`	`HTMLSpanElement`	Forwards a ref to the CategoryGroupTag.	`—`	No
`label`	`string`	The label for the CategoryGroupTag.	`—`	Yes
`group`	`ancc_magnet_nursing_excellence \| covid19 \| diversity_inclusion \| engagement \| environmental_social_governance \| exit \| health_wellbeing \| onboarding \| open_ended \| other \| transformation_change \| values`	The group of the CategoryGroupTag.	`—`	Yes
`size`	`small \| medium \| large`	The size of the CategoryGroupTag.	`medium`	No