@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
67 lines (65 loc) • 2.44 kB
Markdown
---
id: Alert
section: demos
---
## Demos
### Toast
```hbs isFullscreen
{{> page-demo-default page-demo-default--id="alert-toast-example"}}
{{#> alert-group alert-group--modifier="pf-m-toast"}}
{{#> alert-item}}
{{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
{{#> alert-icon alert-icon--type="check-circle"}}
{{/alert-icon}}
{{#> alert-title}}
{{#> screen-reader}}Success alert:{{/screen-reader}}
Newest notification
{{/alert-title}}
{{#> alert-action}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close success alert: Newest notification"'}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/alert-action}}
{{#> alert-description}}
This is a description of the notification content.
{{/alert-description}}
{{/alert}}
{{/alert-item}}
{{#> alert-item}}
{{#> alert alert--modifier="pf-m-warning" alert--attribute='aria-label="Warning alert"'}}
{{#> alert-icon alert-icon--type="exclamation-triangle"}}
{{/alert-icon}}
{{#> alert-title}}
{{#> screen-reader}}Info alert:{{/screen-reader}}
Second newest notification
{{/alert-title}}
{{#> alert-action}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close warning alert: second newest notification"'}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/alert-action}}
{{#> alert-description}}
This is a description of the notification content.
{{/alert-description}}
{{/alert}}
{{/alert-item}}
{{#> alert-item}}
{{#> alert alert--modifier="pf-m-danger" alert--attribute='aria-label="Danger alert"'}}
{{#> alert-icon alert-icon--type="exclamation-circle"}}
{{/alert-icon}}
{{#> alert-title}}
{{#> screen-reader}}Last notification{{/screen-reader}}
Last notification
{{/alert-title}}
{{#> alert-action}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close danger alert: Last notification"'}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/alert-action}}
{{#> alert-description}}
This is a description of the notification content.
{{/alert-description}}
{{/alert}}
{{/alert-item}}
{{/alert-group}}
```