Alert

Notify the user about something with different level of criticity.

Levels

A level property can be used to precise the nature of the information displayed in the alert:

"info" (default): inform the user about something that can be ignored
"success": a reassuring message that confirms everything good
"warning": a warning message, not critical but still has to be noticed
"danger": a danger message, critical, blocker

Vous devez avoir le verrou pour publier l’article.

L’article remplit toutes les conditions nécessaires à la publication.

L’alerte en cours d’édition sur cet article ne sera pas publiée. Vous êtes sur le point de publier l’article uniquement.

Attention, vous êtes sur le point de publier un article avant la fin d'embargo prévue le 12/02/22 à 15:30.

import { Alert } from "swash/Alert";

() => (
  <Alert>Vous devez avoir le verrou pour publier l’article.</Alert>
  <Alert level="success">
    L’article remplit toutes les conditions nécessaires à la publication.
  </Alert>
  <Alert level="warning">
    L’alerte en cours d’édition sur cet article ne sera pas publiée. Vous êtes
    sur le point de publier l’article uniquement.
  </Alert>
  <Alert level="danger">
    Attention, vous êtes sur le point de publier un article avant la fin
    d'embargo prévue le 12/02/22 à 15:30.
  </Alert>
);

Actions

Adds actions property to add action buttons.

You should not use alert to display something that is not important.

import { Alert } from "swash/Alert";
import { Button } from "swash/Button";

() => (
  <Alert actions={({ buttonProps }) => (
    <>
      <Button {...buttonProps}>Save</Button>
      <Button {...buttonProps}>Cancel</Button>
    </>
  )}>
    You should not use alert to display something that is not important.
  </Alert>
);

Compact

Adds compact property to display a compact alert.

You should not use alert to display something that is not important.

import { Alert } from "swash/Alert";
import { Button } from "swash/Button";

() => (
  <Alert compact actions={({ buttonProps }) => (
    <>
      <Button {...buttonProps}>Save</Button>
      <Button {...buttonProps}>Cancel</Button>
    </>
  )}>
    You should not use alert to display something that is not important.
  </Alert>
);