@neo4j-ndl/react/skills/ndl-react/components/tag.md

React implementation of Neo4j Design System

# Tag

Import: `import { Tag } from '@neo4j-ndl/react'`

## Props

### Tag

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | ✅ |  | The content of the tag |
| `onClick` | `MouseEventHandler<HTMLButtonElement>` |  |  | Callback function triggered when tag should be removed |
| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of the tag |
| `type` | `'default' \| 'destructive'` |  | `default` | Type of the tag |

## Examples

### Sizes

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Tag } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div className="n-flex n-gap-token-16 n-items-start">
      <Tag
        size="small"
        onClick={() => {
          console.info('onClick was called');
        }}
      >
        Small
      </Tag>
      <Tag
        size="medium"
        onClick={() => {
          console.info('onClick was called');
        }}
      >
        Medium
      </Tag>
      <Tag
        size="large"
        onClick={() => {
          console.info('onClick was called');
        }}
      >
        Large
      </Tag>
    </div>
  );
};

export default Component;
```

### Types

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Tag } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div className="n-flex n-gap-token-16">
      <Tag
        type="default"
        onClick={() => {
          console.info('onClick was called');
        }}
      >
        Tag
      </Tag>
      <Tag
        type="destructive"
        onClick={() => {
          console.info('onClick was called');
        }}
      >
        Clear all
      </Tag>
    </div>
  );
};

export default Component;
```