@neo4j-ndl/react/skills/ndl-react/components/graph-label.md

React implementation of Neo4j Design System

# GraphLabel

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

## Props

### GraphLabel

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `children` | `ReactNode` |  |  | Content displayed inside the label |
| `color` | `string` |  |  | The background color of the label |
| `isDisabled` | `boolean` |  | `false` | Whether the label is disabled |
| `isFluid` | `boolean` |  | `false` | Whether the label should expand to full available width |
| `isSelected` | `boolean` |  | `false` | Whether the label is selected |
| `onClick` | `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Callback function that is called when the label is clicked |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'small'` |  | `large` | The size of the label |
| `type` | `'node' \| 'propertyKey' \| 'relationship' \| 'relationshipLeft' \| 'relationshipRight'` |  | `node` | The type of label |

## Examples

### Color

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

import { tokens } from '@neo4j-ndl/base';
import { GraphLabel } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div className="n-flex n-gap-token-16">
      <GraphLabel type="node" color={tokens.graph['1']}>
        Node
      </GraphLabel>
      <GraphLabel type="node" color={tokens.graph['3']}>
        Node
      </GraphLabel>
      <GraphLabel type="node" color={tokens.graph['12']}>
        Node
      </GraphLabel>
    </div>
  );
};

export default Component;
```

### Disabled

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

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

const Component = () => {
  return (
    <GraphLabel type="node" isDisabled>
      Node
    </GraphLabel>
  );
};

export default Component;
```

### Fluid

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

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

const Component = () => {
  return (
    <GraphLabel type="relationship" isFluid={true}>
      Long long long long long long long long long long long long label text
      that is fluid
    </GraphLabel>
  );
};

export default Component;
```

### Non Interactive

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

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

const Component = () => {
  return (
    <GraphLabel type="node" as="span">
      Label
    </GraphLabel>
  );
};

export default Component;
```

### Selected

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

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

const Component = () => {
  return (
    <GraphLabel type="node" isSelected>
      Label
    </GraphLabel>
  );
};

export default Component;
```

### Sizes

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

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

const Component = () => {
  return (
    <div className="n-flex n-gap-token-16">
      <GraphLabel type="node" size="small">
        Label
      </GraphLabel>
      <GraphLabel type="node" size="large">
        Label
      </GraphLabel>
    </div>
  );
};

export default Component;
```

### Types

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

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

const Component = () => {
  return (
    <div className="n-flex n-gap-token-16">
      <GraphLabel type="node">Node</GraphLabel>
      <GraphLabel type="propertyKey">Property Key</GraphLabel>
      <GraphLabel type="relationship">Relationship</GraphLabel>
      <GraphLabel type="relationshipLeft">Relationship Left</GraphLabel>
      <GraphLabel type="relationshipRight">Relationship Right</GraphLabel>
    </div>
  );
};

export default Component;
```