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, a circular background and semantic color tokens, not a separate component or icon set.

Large (2.5rem)

Status: Operational
Status: Minor outage
Status: Major outage
Status: Degraded performance
Status: Under maintenance

Medium (2rem)

Status: Operational
Status: Minor outage
Status: Major outage
Status: Degraded performance
Status: Under maintenance

Small (1.5rem)

Status: Operational
Status: Minor outage
Status: Major outage
Status: Degraded performance
Status: Under maintenance

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
Validation or help connected to a field	FormStatus
Page-wide operational message	GlobalStatus

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 for application setup. This pattern needs no media queries or dark mode overrides.

React#

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#

.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:

<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 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 or Anchor when the status opens more details.

Suggest an edit