Alert (PMWCS Addon)
An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
- Module @pmwcs/alert
- Import styles:
- Using CSS Loader
- import '@pmwcs/alert/styles';
- Or include stylesheets
- '@pmwcs/alert/alert.css'
- Using CSS Loader
<>
<Alert severity='error'>This is an error alert — check it out!</Alert>
<Alert severity='warning'>This is a warning alert — check it out!</Alert>
<Alert severity='info'>This is an info alert — check it out!</Alert>
<Alert severity='success'>This is a success alert — check it out!</Alert>
</>
defaults to a warning alert
<Alert>This is a warning alert — check it out!</Alert>
use with custom icon
<Alert icon='check' severity='success'>This is a success alert — check it out!</Alert>
don't display an icon
<Alert icon={false} severity='success'>This is a success alert — check it out!</Alert>
Variants
Outlined
<>
<Alert outlined severity='error'>This is an error alert — check it out!</Alert>
<Alert outlined severity='warning'>This is a warning alert — check it out!</Alert>
<Alert outlined severity='info'>This is an info alert — check it out!</Alert>
<Alert outlined severity='success'>This is a success alert — check it out!</Alert>
</>
Filled
<>
<Alert filled severity='error'>This is an error alert — check it out!</Alert>
<Alert filled severity='warning'>This is a warning alert — check it out!</Alert>
<Alert filled severity='info'>This is an info alert — check it out!</Alert>
<Alert filled severity='success'>This is a success alert — check it out!</Alert>
</>
Actions
<>
<Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
<Alert
action={
<Button>
UNDO
</Button>
}
>
This is a success alert — check it out!
</Alert>
</>
Alert
Displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
Props
Name | Type | Description |
---|---|---|
outlined |
undefined | false | true |
Makes the alert outlined. |
filled |
undefined | false | true |
Makes the alert filled. |
action |
AnyComponent |
The action to display. It renders after the message, at the end of the alert. |
severity |
success | info | warning | error |
The size of the avatar |
icon |
AnyComponent |
Override the icon displayed before the children. |
onClose |
(event: Event) => void |
Callback fired when the component requests to be closed. |