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

Show dismissible alert

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>
  );
}

Copy code Open in playground

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 *

'success' | 'info' | '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.