Alert
Overview
Installation
npm install @patternfly/elementsUsage
Slots
-
actions -
header -
Provide a header for the alert message.
- Default Slot
-
Provide a description for the alert message
Attributes
status-
- DOM Property
status- Type
-
| 'warning' | 'custom' | 'neutral' | 'info' | 'success' | 'danger' - Default
-
'neutral'
variant-
- DOM Property
variant- Type
-
'alternate' | 'inline' - Default
-
unknown
dismissable-
- DOM Property
dismissable- Type
-
boolean - Default
-
false
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-global--BorderWidth--md |
—
|
|
--pf-global--default-color--200 |
—
|
|
--pf-global--spacer--md |
—
|
|
--pf-global--spacer--xs |
—
|
|
--pf-c-alert--MaxWidth |
initial
|
|
--pf-global--FontFamily--text |
RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif
|
|
--pf-global--FontSize--sm |
—
|
|
--pf-global--lineHeight--md |
—
|
|
--pf-global--palette--purple-50 |
#e7f1fa
|
|
--pf-global--success-color--100 |
#3e8635
|
|
--pf-global--palette--green-50 |
#f3faf2
|
|
--pf-global--warning-color--100 |
#f0ab00
|
|
--pf-global--BackgroundColor--100 |
#f2f9f9
|
|
--pf-global--BorderColor--100 |
#009596
|
|
--pf-global--icon--Color--light |
#009596
|
|
--pf-global--palette--gold-50 |
#003737
|
|
--pf-global--danger-color--200 |
#c9190b
|
|
--pf-global--palette--purple-500 |
#a30000
|
|
--pf-global--palette--red-50 |
#faeae8
|
|
--title--Color |
—
|
CSS Shadow Parts
container
