Callout API

Import

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

Dismissing callouts

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

Preview
Code

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

export default function Demo() {
  const [isCalloutOpen, setIsCalloutOpen] = useState(false);

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

      {isCalloutOpen && (
        <Callout tone="info" title="Dismissal example" isDismissible onDismiss={() => setIsCalloutOpen(false)}>
          This callout can be dismissed.
        </Callout>
      )}
    </Stack>
  );
}

Actions

Use the actions prop to render actions within the callout.

Preview
Code

Callout with actions

This callout contains actions.

Learn more

import { Button, Callout, LinkButton } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Callout
      tone="info"
      title="Callout with actions"
      actions={
        <>
          <Button size="small">Primary action</Button>
          <LinkButton href="#" size="small" variant="tertiary">
            Learn more
          </LinkButton>
        </>
      }
    >
      This callout contains actions.
    </Callout>
  );
}

API reference

Callout

Displays an inline message banner that highlights important information.

See callout usage guidelines.

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

CalloutProps

children * ReactNode: The content of the callout.
tone * 'info' | 'success' | 'warning' | 'critical': The tone of the callout.
title string: The title of the callout.
actions ReactNode: Optional actions to display at the bottom of the callout. Use Button or LinkButton components only.
isDismissible boolean: Whether the callout can be dismissed by the user.

Defaults to false .
onDismiss () => void: Callback function to be called when the dismiss button is pressed. Makes the callout 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.