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

React implementation of Neo4j Design System

# StatusLabel

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

## Props

### StatusLabel

| 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` | ✅ |  | The content displayed inside the status label |
| `fill` | `'clean' \| 'filled' \| 'outlined' \| 'semi-filled'` |  | `filled` | Fill type of status label, determines the background and border styles. |
| `hasIcon` | `boolean` |  | `false` | Whether the status label have an icon |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'small'` |  | `large` | Size of the status label |
| `variant` | `'danger' \| 'default' \| 'discovery' \| 'info' \| 'success' \| 'warning'` |  | `default` | Color of the status label that indicates its purpose. |

## Examples

### Default

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

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

const Component = () => {
  return <StatusLabel>StatusLabel</StatusLabel>;
};

export default Component;
```

### Colors

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

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

const Component = () => {
  return (
    <div className="n-flex n-gap-token-16 n-flex-wrap">
      <StatusLabel variant="default">Default</StatusLabel>
      <StatusLabel variant="info">Info</StatusLabel>
      <StatusLabel variant="success">Success</StatusLabel>
      <StatusLabel variant="warning">Warning</StatusLabel>
      <StatusLabel variant="danger">Danger</StatusLabel>
      <StatusLabel variant="discovery">Discovery</StatusLabel>
    </div>
  );
};

export default Component;
```

### Fills

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

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

const Component = () => {
  return (
    <div className="n-flex n-gap-token-16 n-flex-wrap">
      <StatusLabel fill="filled">Filled</StatusLabel>
      <StatusLabel fill="outlined">Outlined</StatusLabel>
      <StatusLabel fill="semi-filled">Semi-filled</StatusLabel>
      <StatusLabel fill="clean" hasIcon>
        Clean
      </StatusLabel>
    </div>
  );
};

export default Component;
```

### With Icons

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

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

const Component = () => {
  return (
    <div className="n-grid n-grid-cols-6 n-grid-rows-2 n-gap-token-16 n-items-center n-justify-items-center">
      <StatusLabel variant="default" hasIcon>
        Default
      </StatusLabel>
      <StatusLabel variant="info" hasIcon>
        Info
      </StatusLabel>
      <StatusLabel variant="success" hasIcon>
        Success
      </StatusLabel>
      <StatusLabel variant="danger" hasIcon>
        Danger
      </StatusLabel>
      <StatusLabel variant="warning" hasIcon>
        Warning
      </StatusLabel>
      <StatusLabel variant="discovery" hasIcon>
        Discovery
      </StatusLabel>
      <StatusLabel variant="default" fill="clean" hasIcon>
        Default
      </StatusLabel>
      <StatusLabel variant="info" fill="clean" hasIcon>
        Info
      </StatusLabel>
      <StatusLabel variant="success" fill="clean" hasIcon>
        Success
      </StatusLabel>
      <StatusLabel variant="danger" fill="clean" hasIcon>
        Danger
      </StatusLabel>
      <StatusLabel variant="warning" fill="clean" hasIcon>
        Warning
      </StatusLabel>
      <StatusLabel variant="discovery" fill="clean" hasIcon>
        Discovery
      </StatusLabel>
    </div>
  );
};

export default Component;
```