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

React implementation of Neo4j Design System

# ReadOnlyTag

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

## Props

### ReadOnlyTag

| 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 |
| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'medium' \| 'small' \| 'x-small'` |  |  | Size of the tag |

## Examples

### Default

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

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

const Component = () => {
  return <ReadOnlyTag>Read-only Tag</ReadOnlyTag>;
};

export default Component;
```

### Colors

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

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

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

export default Component;
```

### Sizes

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

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

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

export default Component;
```

### With Leading Icon

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

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

const Component = () => {
  return (
    <ReadOnlyTag leadingVisual={<DatabasePlusIcon />}>
      Read-only Tag with leading icon
    </ReadOnlyTag>
  );
};

export default Component;
```