import {
  Canvas,
  Controls,
  Meta,
  Story,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as TagStories from './Tag.stories'
import { LifecycleTag } from '../../docs/components'

<Meta of={TagStories} />

<Title>Tag</Title>
<Subtitle>A tag is used to label, categorize, or organize items.</Subtitle>
<LifecycleTag variant="Stable" />

<Canvas of={TagStories.Default} sourceState="shown">
  <Controls />
</Canvas>

## Usage

### Import

```tsx
import { Tag } from '@chainlink/blocks'
```

### Example

```tsx
export function MyComponent() {
  return <Tag>Default</Tag>
}
```

## Examples

### All Variants

The `Tag` component comes in multiple variants and sizes.

<Canvas of={TagStories.AllVariants} sourceState="shown" />

### Without Icon

The icon can be hidden by setting the `hideIcon` prop to `true`.

<Canvas of={TagStories.WithoutIcon} sourceState="shown" />