---
title: Status indicators
description: Use existing icons and semantic colors to show a status.
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.134Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Status indicators

Use a status icon to give a compact visual summary of an item's current state. It is a composition of an existing [Icon](/web/components/icon), a circular background and semantic color tokens, not a separate component or icon set.


```tsx
render(<StatusIcons />)
```


## Where it fits

| Use                                     | Pattern or component                          |
| --------------------------------------- | --------------------------------------------- |
| Compact state beside an item or service | Status icon pattern                           |
| Count, short label or new-item metadata | [Badge](/web/components/badge)                |
| Validation or help connected to a field | [FormStatus](/web/components/form-status)     |
| Page-wide operational message           | [GlobalStatus](/web/components/global-status) |

Badge should not be used as the icon container. It adds label and status semantics intended for badge content. FormStatus icons belong to form feedback and are not general status assets.

## Pattern

Sizes refer to the outer circle: Large is 2.5rem, Medium is 2rem, and Small is 1.5rem. Use a 24px `_medium` icon for Large and a 16px default icon for Medium and Small.

Map product-specific states to the closest semantic status. The icon and visible label should communicate the exact meaning.

| Semantic status | Background token                        | Icon color token                     | Examples                   |
| --------------- | --------------------------------------- | ------------------------------------ | -------------------------- |
| Positive        | `--token-color-background-positive`     | `--token-color-text-neutral-inverse` | Operational, completed     |
| Warning         | `--token-color-background-warning`      | `--token-color-text-neutral-onlight` | Degraded, delayed          |
| Negative        | `--token-color-background-error`        | `--token-color-text-neutral-ondark`  | Partial or complete outage |
| Neutral         | `--token-color-background-neutral-base` | `--token-color-text-neutral`         | Maintenance, unknown       |

The semantic tokens adapt to supported dark color schemes. Follow the existing [Dark mode guide](/web/styling-and-themes/design-tokens/dark-mode) for application setup. This pattern needs no media queries or dark mode overrides.

### React

```tsx
import { Icon, VisuallyHidden } from '@dnb/eufemia'
import { Theme } from '@dnb/eufemia/shared'
import { check, check_medium } from '@dnb/eufemia/icons'
import '@dnb/eufemia/style/themes/ui/ui-theme-dark-mode.min.css'

function App() {
  return (
    <Theme colorScheme="auto">
      <ServiceStatus size="large" />
      <ServiceStatus size="medium" />
      <ServiceStatus size="small" />
    </Theme>
  )
}

function ServiceStatus({ size }: { size: 'large' | 'medium' | 'small' }) {
  return (
    <span className="status">
      <span
        className={`status__icon status__icon--${size} status__icon--positive`}
        aria-hidden
      >
        <Icon icon={size === 'large' ? check_medium : check} />
      </span>
      <VisuallyHidden>Status: </VisuallyHidden>
      Operational
    </span>
  )
}
```

If the application already configures `Theme` and imports its dark token stylesheet, only the `ServiceStatus` composition is needed.

### CSS

```css
.status {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.status__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--token-radius-full);
  color: var(--status-icon-color);
  background-color: var(--status-icon-background);
}

.status__icon--large {
  width: 2.5rem;
  height: 2.5rem;
}

.status__icon--medium {
  width: 2rem;
  height: 2rem;
}

.status__icon--small {
  width: 1.5rem;
  height: 1.5rem;
}

.status__icon--triangle .dnb-icon {
  transform: translateY(-0.0625rem);
}

.status__icon--positive {
  --status-icon-color: var(--token-color-text-neutral-inverse);
  --status-icon-background: var(--token-color-background-positive);
}

.status__icon--warning {
  --status-icon-color: var(--token-color-text-neutral-onlight);
  --status-icon-background: var(--token-color-background-warning);
}

.status__icon--negative {
  --status-icon-color: var(--token-color-text-neutral-ondark);
  --status-icon-background: var(--token-color-background-error);
}

.status__icon--neutral {
  --status-icon-color: var(--token-color-text-neutral);
  --status-icon-background: var(--token-color-background-neutral-base);
}
```

For the default 16px triangle asset, add the optical-alignment modifier to its circle:

```tsx
<span
  className="status__icon status__icon--small status__icon--negative status__icon--triangle"
  aria-hidden
>
  <Icon icon={exclamation_triangle} />
</span>
```

Import `exclamation_triangle` from `@dnb/eufemia/icons`. The modifier applies to Medium and Small circles; the 24px asset used in Large does not need this adjustment.

## Accessibility

- Always pair the icon with a visible status label. Color and the icon alone are not enough.
- Add a visually hidden `Status:` prefix when the surrounding structure does not already identify the value as a status. This gives assistive technology the context “Status: Operational” without duplicating visible text.
- Omit the hidden prefix when a table header, description term or group label already provides the same context.
- Hide the icon from assistive technology with `aria-hidden` when the visible text communicates the same status.
- If the status has no visible label, give the `Icon` an `alt` value.
- For live status changes, use [AriaLive](/web/components/aria-live) around the changing text. Do not add `role="status"` to every static icon because that role defines a live region.
- Do not make the icon container interactive. Use a [Button](/web/components/button) or [Anchor](/web/components/anchor) when the status opens more details.