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

  • default
  • moderate
  • warning
  • important
  • critical
  • success
  • info
  • normal
  • accent
  • complement
DOM Property
status
Type
PageStatus
Default
'default'

DOM Properties

None

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pfe-theme--color--feedback--default

Color for default state

 —
--pfe-theme--color--feedback--moderate

Color for moderate and warningstates

 —
--pfe-theme--color--feedback--important

Color for important state

 —
--pfe-theme--color--feedback--critical

Color for critical state

 —
--pfe-theme--color--feedback--success

Color for success state

 —
--pfe-theme--color--feedback--info

Color for info state

 —
--pfe-theme--color--ui-accent

Color for normal state

 —
--pfe-theme--color--ui-accent

Color for accent state

 —
--pfe-theme--color--ui-base

Color for complement state

 —

CSS Shadow Parts

None