PatternFly · @patternfly/react-core

Banner

Full-width status strip — report status (draft, review, superseded, older version). Static markup, no client JS.

Import: import { Banner } from '@patternfly/react-core'
Use on: reports · tools
Upstream docs: www.patternfly.org/components/banner

A full-width strip for page-level status. ReportLayout renders one for draft, review and superseded reports (status="warning") and for older versions (status="info"). PatternFly 6 status colours: info is purple, custom is teal, warning yellow, danger red-orange, success green.

Status banners

Code

import { Banner } from '@patternfly/react-core';
<Banner status="warning" screenReaderText="Warning banner">Draft — not for citation</Banner>
<Banner status="info" screenReaderText="Info banner">You are reading version 1.0. <a href="#">Go to the latest version →</a></Banner>
<Banner>Neutral banner</Banner>