| section | Extensions | |
|---|---|---|
| subsection | Component groups | |
| id | Severity | |
| source | react | |
| propComponents |
|
|
| sourceLink | https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/Severity.md |
import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity'; import { FunctionComponent } from 'react'
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.
The default style for the severity component appears when any value besides "none", "low", "medium", "high", or "critical" is passed to Severity.
To style no severity, pass "none" or SeverityType.none to severity.
To style a minor severity, pass "minor" or SeverityType.minor to severity.
To style a moderate severity, pass "moderate", or SeverityType.moderate to severity.
To style an important severity, pass "important", or SeverityType.important to severity.
To style a critical severity, pass "critical" or SeverityType.critical to severity.