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

React implementation of Neo4j Design System

# StatusIndicator

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

## Props

### StatusIndicator

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `ref` | `Ref<SVGSVGElement>` |  |  | A ref to apply to the root element. |
| `variant` | `'danger' \| 'info' \| 'success' \| 'unknown' \| 'warning'` |  | `unknown` | Type of the status indicator. |

## Accessibility

## Implementation guidelines

The StatusIndicator component uses the `aria-hidden` attribute to hide it from screen readers. This component should be used as a visual indicator only, and the meaning that it represents should be conveyed through other means; like connected text, or a tooltip/aria-label if it's on a button.

## Examples

### Variants

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

import { StatusIndicator, Typography } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div className="n-flex n-gap-token-16">
      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
        <StatusIndicator variant="unknown" />
        <Typography variant="label">Unknown</Typography>
      </div>
      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
        <StatusIndicator variant="success" />
        <Typography variant="label">Success</Typography>
      </div>
      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
        <StatusIndicator variant="info" />
        <Typography variant="label">Info</Typography>
      </div>
      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
        <StatusIndicator variant="warning" />
        <Typography variant="label">Warning</Typography>
      </div>
      <div className="n-flex n-flex-col n-items-center n-gap-token-8">
        <StatusIndicator variant="danger" />
        <Typography variant="label">Danger</Typography>
      </div>
    </div>
  );
};

export default Component;
```