Status

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

The status component's purpose is to display status with icon and text to the user.

Basic status

Status component consinsts of an icon configured using icon and a message, specified with label.

Warning

Status with description

Optionally a description can be displayed by passing it to the description property.

Warning
1 issue found

Icon only status

The iconOnly flag allows to hide the status message and show only an icon with a tooltip.

You can use the link variant to display the link button status.

Popover status

You can use popover variant to display the status details in a popover.

Props

Status

*required
NameTypeDefaultDescription
statusrequiredIconStatusStatus to control icon color
descriptionstringDescription to be displayed under the label
iconReact.ReactElementStatus icon
iconOnlybooleanIf true, only displays icon
iconTitlestringIcon title for accessibility
labelstringStatus label text
onClick(event: React.MouseEvent<HTMLElement, MouseEvent>) => voidOptional link variant onClick callback
ouiaIdstring | number'Status'Custom OUIA ID
popoverPropsPopoverPropsProps for the optional popover
variantStatusVariant'plain'Variant of the status component to be displayed