v2.2.3

Alert

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/alert

npm @spark-web/alert

Source GitHub.com

Bundle unpkg.com

Alert displays a short and concise message to draw a users' attention without interrupting their current task.

Examples

Tones

The component offers several levels of tonal severity.

This is a caution alert

Caution message

This is a positive alert

Positive message

This is an info alert

Info message

This is a critical alert

Critical message

Open in Playroom

<Stack gap="large">
  <Alert tone="caution" heading="This is a caution alert">
    Caution message
  </Alert>
  <Alert tone="positive" heading="This is a positive alert">
    Positive message
  </Alert>
  <Alert tone="info" heading="This is an info alert">
    Info message
  </Alert>
  <Alert tone="critical" heading="This is a critical alert">
    Critical message
  </Alert>
</Stack>

<Stack gap="large">
  <Alert tone="caution" heading="This is a caution alert">
    Caution message
  </Alert>
  <Alert tone="positive" heading="This is a positive alert">
    Positive message
  </Alert>
  <Alert tone="info" heading="This is an info alert">
    Info message
  </Alert>
  <Alert tone="critical" heading="This is a critical alert">
    Critical message
  </Alert>
</Stack>

Closing

You can also set an onClose prop callback function which will render a close icon button on the alert. The callback function will be called upon the button being pressed.

This is a caution alert

Click the button on the right to dismiss this notification

Open in Playroom

const [isOpen, setIsOpen] = React.useState(true);

React.useEffect(() => {
  const timeout = setTimeout(() => {
    if (!isOpen) {
      setIsOpen(true);
    }
  }, 2000);

  return () => clearTimeout(timeout);
}, [isOpen]);

if (!isOpen) {
  return null;
}

return (
  <Alert
    tone="caution"
    heading="This is a caution alert"
    onClose={() => setIsOpen(false)}
  >
    Click the button on the right to dismiss this notification
  </Alert>
);

const [isOpen, setIsOpen] = React.useState(true);

React.useEffect(() => {
  const timeout = setTimeout(() => {
    if (!isOpen) {
      setIsOpen(true);
    }
  }, 2000);

  return () => clearTimeout(timeout);
}, [isOpen]);

if (!isOpen) {
  return null;
}

return (
  <Alert
    tone="caution"
    heading="This is a caution alert"
    onClose={() => setIsOpen(false)}
  >
    Click the button on the right to dismiss this notification
  </Alert>
);

Custom icons

In rare cases, you may need to provide a custom icon. To do so, we expose an icon prop. You can pass it any icon from the Icon package.

This an info alert

Did you know that Alert components can have custom icons?

Open in Playroom

<Alert heading="This an info alert" icon={LightBulbIcon}>
  Did you know that Alert components can have custom icons?
</Alert>

<Alert heading="This an info alert" icon={LightBulbIcon}>
  Did you know that Alert components can have custom icons?
</Alert>

Props

Prop	Type	Description
children	ReactNode: string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal	The body content of the alert.
closeLabel?	string	Sets a label for the close button if the close icon button is present. Default: `"Dismiss alert"`
data?	DataAttributeMap	Sets data attributes on the component.
heading?	string	Sets a heading for the alert.
icon?	ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>> \| IconWithWithoutRef	Optionally provide a custom icon to be used instead of the default icon.
id?	string	Sets a unique indentifier on the component.
onClose?	() => void	Sets a callback function when the alert close icon button is pressed. If the onClose function is not defined, the close icon button will not be rendered on the alert component.
tone?	"caution" \| "critical" \| "info" \| "positive"	Sets the tone of the alert. Default: `"info"`