Alert API

Import

import { Alert } from '@cimpress-ui/react';

Accessibility notes

Alert follows the ARIA alert pattern.

Alerts cannot contain interactive content.

Alerts should be rendered dynamically after the initial page load. Alerts that are present on the page before page load completes will not be announced by most screen readers.

Use alerts infrequently to minimize disruption to the user’s workflow.

Don’t remove alerts automatically after a timeout. Use the built-in dismissal feature if you want users to be able to dismiss the alert.

Dismissing alerts

Alerts can optionally be dismissed by the users. To enable this, pass an isDismissible prop to the alert component.

Preview
Code

import { Alert, Button, Stack } from '@cimpress-ui/react';
import { useState } from 'react';

export default function Demo() {
  const [isAlertOpen, setIsAlertOpen] = useState(false);

  return (
    <Stack gap={16}>
      <Button onPress={() => setIsAlertOpen(true)}>Show dismissible alert</Button>

      {isAlertOpen && (
        <Alert tone="info" title="Dismissal example" isDismissible onDismiss={() => setIsAlertOpen(false)}>
          This alert can be dismissed.
        </Alert>
      )}
    </Stack>
  );
}

API reference

Alert

Displays an inline message banner in response to a user action.

See alert usage guidelines.

ref Ref<HTMLDivElement>: The ref type for this component.

AlertProps

children * StringLikeChildren: The content of the alert.
tone * 'info' | 'success' | 'warning' | 'critical': The tone of the alert.
title string: The title of the alert.
isDismissible boolean: Whether the alert can be dismissed by the user.

Defaults to false .
onDismiss () => void: Callback function to be called when the dismiss button is pressed. Makes the alert controlled.
id string: The element's unique identifier. See MDN.
data-cim-style-root boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

StyleProps

margin Responsive<Spacing | "auto">: The amount of margin applied to all edges of this component.
marginX Responsive<Spacing | "auto">: The amount of margin applied to the left and right edges of this component. Takes priority over margin.
marginY Responsive<Spacing | "auto">: The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.
marginTop Responsive<Spacing | "auto">: The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.
marginRight Responsive<Spacing | "auto">: The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.
marginBottom Responsive<Spacing | "auto">: The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.
marginLeft Responsive<Spacing | "auto">: The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.