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 |