Alert

Purpose

The Alert component is used to alert a user of a serious error or attempt to warn them of a potential error.

Basic Implementation

import Alert from '@wedgekit/alerts';

const Test = () => {
  const errorBodyFromAPI = 'There has been a grievous error that you must attend to.';

  return <Alert detail={errorBodyFromAPI}>There has been a critical error!</Alert>;
};

render(<Test />);

Props

children

Type: string

Required: ✅

The primary alert message

detail

Type: string

Required: ❌

Additional details that will be displayed to the user when they click "show details"

id

Type: string

Required: ❌

An ID which will be passed through to the DOM; potentially useful for ARIA purposes

warning

Type: boolean

Required: ❌

Alerts default to critical or "danger," however warning can optionally set as true to display alerts as less life-threatening.

onClose

Type: (event: SyntheticEvent<Element, Event>) => void

Required: ✅

Callback when the user presses the close button