Circle status¶

Circle status indicates states on a table or list.

Usage ---¶

The circle status shows a type icon with a status indicator overlay. The status can be a simple indication or a severity symbol: Information, Caution, Warning, Danger, Critical, Pause, Progress or Unknown. Circle status is available in two sizes: Regular or Small.

1. Circle status indication, 2. Status icon

When to use¶

• On a table or list
• At the beginning (left side) of a row
• Indicate the status on a type icon

Best practices¶

• Badge on circle status shall be colored according definition for the status colors
• Use it with severity symbols when there is a need to identify different severities
• The color of the icon should remain constant according definition in UI colors

Design ---¶

There are some variations in the representation of the circle status.

1. Default state, 2. Variant with status symbol, 3. Variant with dot, 4. Pulsating state, 5. Supporting icon

Variant: status symbol¶

Use a circle status with status symbols when there is a need to identify different severities or states.

Variant: dot¶

Use the circle status with dot for simple indications, with one specific status color (critical, danger, ...) per viewport only. The status is indicated by a dot on top right of the circle. To ensure accessibility, the circle status a severity symbol is the better choice.

Pulsating¶

The pulse feature is adding a circle on the badge, which fades the opacity. The rhythm and the fading must be in synch with the status bar.

The pulse feature (blinking) is used to indicate places on the screen, where the user has to take immediate action.

The pulse feature (blinking effect) is used to highlight areas where the user needs to take immediate action. It is intended specifically for event lists. Using it in other contexts or too frequently can reduce its effectiveness.

Supporting icon¶

Add a supporting icon when needed to provide extra context, such as indicating an 'in and out' event. While any icon can be assigned, ensure it adds meaningful context.

Code ---¶

Usage¶

import { SiCircleStatusComponent } from '@siemens/element-ng/circle-status';

@Component({
  imports: [SiCircleStatusComponent, ...]
})