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

React implementation of Neo4j Design System

# DismissibleTag

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

## Props

### DismissibleTag

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` |  |  | The content of the tag |
| `color` | `'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '7' \| '8'` |  |  | Categorical color for the background |
| `leadingVisual` | `ReactNode` |  |  | Icon to display before the content |
| `onRemove` | `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' \| 'x-small'` |  | `medium` | Size of the tag |

## Examples

### Default

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

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

const Component = () => {
  return (
    <DismissibleTag onRemove={() => console.info('onRemove was called')}>
      Dismissible Tag
    </DismissibleTag>
  );
};

export default Component;
```

### Colors

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

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

const Component = () => {
  const handleRemove = () => {
    console.info('onRemove was called');
  };

  return (
    <div className="n-flex n-flex-col n-gap-token-16">
      <DismissibleTag color="1" onRemove={handleRemove}>
        Categorical color 1
      </DismissibleTag>
      <DismissibleTag color="2" onRemove={handleRemove}>
        Categorical color 2
      </DismissibleTag>
      <DismissibleTag color="3" onRemove={handleRemove}>
        Categorical color 3
      </DismissibleTag>
      <DismissibleTag color="4" onRemove={handleRemove}>
        Categorical color 4
      </DismissibleTag>
      <DismissibleTag color="5" onRemove={handleRemove}>
        Categorical color 5
      </DismissibleTag>
      <DismissibleTag color="6" onRemove={handleRemove}>
        Categorical color 6
      </DismissibleTag>
      <DismissibleTag color="7" onRemove={handleRemove}>
        Categorical color 7
      </DismissibleTag>
      <DismissibleTag color="8" onRemove={handleRemove}>
        Categorical color 8
      </DismissibleTag>
    </div>
  );
};

export default Component;
```

### Sizes

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

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

const Component = () => {
  const handleRemove = () => {
    console.info('onRemove was called');
  };

  return (
    <div className="n-flex n-flex-row n-gap-token-8">
      <DismissibleTag size="x-small" onRemove={handleRemove}>
        X-Small
      </DismissibleTag>
      <DismissibleTag size="small" onRemove={handleRemove}>
        Small
      </DismissibleTag>
      <DismissibleTag size="medium" onRemove={handleRemove}>
        Medium
      </DismissibleTag>
      <DismissibleTag size="large" onRemove={handleRemove}>
        Large
      </DismissibleTag>
    </div>
  );
};

export default Component;
```

### With Leading Icon

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

import { DismissibleTag } from '@neo4j-ndl/react';
import { DatabasePlusIcon } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <DismissibleTag
      leadingVisual={<DatabasePlusIcon />}
      onRemove={() => console.info('onRemove was called')}
    >
      Dismissible Tag with leading icon
    </DismissibleTag>
  );
};

export default Component;
```