@pmwcs/alert

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'

<>
  <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.