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