The severity component generates an icon with an optional label, which corresponds to a level minor, moderate, important or critical. Each level corresponds with a severity level and respective color:
Severity level | Meaning | Style |
|---|---|---|
Level 1 | Minor severity (best case scenario) | Dark grey icon |
Level 2 | Moderate severity | Yellow icon |
Level 3 | Important severity | Orange icon |
Level 4 | Critical severity (worst case scenario) | Red icon |
To specify the severity risk level, you can pass a predefined enum or text value into the severity property that corresponds to the appropriate severity level.
To add an optional label, add the label property to the <Severity> component.
Examples
Undefined variant
The default style for the severity component appears when any value besides "none", "low", "medium", "high", or "critical" is passed to Severity.
Moderate severity
To style a moderate severity, pass "moderate", or SeverityType.moderate to severity.
Important severity
To style an important severity, pass "important", or SeverityType.important to severity.
Critical severity
To style a critical severity, pass "critical" or SeverityType.critical to severity.
Props
Severity
| Name | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | Label displayed next to the severity | |
| severityrequired | SeverityType | Determines a variant of displayed severity | |
| className | string | Custom className | |
| labelHidden | boolean | Option to hide the label | |
| ouiaId | string | number | 'Severity-icon' | Custom OUIA ID |
