PatternFly Elements - Home PatternFly Elements

Page status

Overview

Page Status creates a flag/banner on the right side of the page denoting the status of the page or document the author is viewing.


View the demo

Installation

npm install @patternfly/pfe-page-status

Usage

<pfe-page-status status="critical">
  Previewing
</pfe-page-status>

Slots

default slot

Content in the default slot will be used as the text for the banner on the right side of the page.

Attributes

status

Controls the background color of the banner.

Values

Methods

None

Events

None

Styling hooks

Option Theme Color Variable
default --pfe-theme--color--feedback--default
moderate --pfe-theme--color--feedback--moderate
warning Same as moderate
important --pfe-theme--color--feedback--important
critical --pfe-theme--color--feedback--critical
success --pfe-theme--color--feedback--success
info --pfe-theme--color--feedback--info
normal --pfe-theme--color--ui-accent
accent --pfe-theme--color--ui-accent
complement --pfe-theme--color--ui-base