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

Show dismissible callout

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

Copy code Open in playground

Actions

Use the actions prop to render actions within the callout.

Preview

Callout with actions

This callout contains actions.

Primary actionLearn more

Code

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

Copy code Open in playground

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 *

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