import { Canvas, Controls, Meta, Unstyled } from '@storybook/blocks'
import { InlineNotification } from '~components/Notification'
import { ResourceLinks, KAIOInstallation, ReplacementNotice } from '~storybook/components'
import * as TagStories from './Tag.stories'

<Meta of={TagStories} />

# Tag (deprecated)

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tag"
  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37843&t=zlNKMVZd1i6MB4db-1"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928978/Tags"

/>

<ReplacementNotice />

<KAIOInstallation exportNames="Tag" />

## Overview

Tags help users quickly recognize important information about items that organize and categorize them. They visually label items with small amounts of information or the item's status, usually with keywords that help organize and categorize the items.

<Canvas of={TagStories.Playground} />
<Controls of={TagStories.Playground} />

## API

### Variants

We have 3 different sets of combinations for various uses.

#### Status

Use status tags to show the status of surveys, reports, action plans, and performance feedback.

<Canvas of={TagStories.Status} />

#### Validation

Use validation tags for indicating the validation state such as the Cautionary style for cautioning users that the item has a validation warning that could be addressed.

<Canvas of={TagStories.Validation} />

#### Sentiments

Use sentiment tags only for sentiment or other employee feedback data.

<Canvas of={TagStories.Sentiments} />

### Sizes

**Note:** Icons and Avatars are not supported in `small` sizes.

<Canvas of={TagStories.Sizes} />

### Avatar

An Avatar can be added in two ways, either by importing the `<Avatar />` component and passing it in, or you can use the Avatar's props.

**Note:** Avatar are not supported in `small` sizes.

#### Import Avatar

<Canvas of={TagStories.ProfileWithAvatarImport} />

#### Avatar props

<Canvas of={TagStories.ProfileWithAvatarProps} />

### Dismissable

<Canvas of={TagStories.Dismissible} />

### TruncateWidth

A pixel width which sets a limit for when the text starts to truncate.

<Canvas of={TagStories.Truncate} />

### Inline

Removes the default right-hand margin.

<Canvas of={TagStories.Inline} />