Callout

The Callout component includes Root, Icon, Text, and optional ActionPrimary / ActionSecondary for actions. View source

Groups Icon, Text, and optional action parts. Add CalloutActionSecondary and CalloutActionPrimary as children (same compositional pattern as Dialog.Footer / EmptyState.action). Those components wrap Button with fixed gray / ghost / size 2. Do not pass both those children and the actions prop – compositional children win and actions is ignored.

An optional actions prop (CalloutActions in source types) exists for object-based configuration; prefer ActionPrimary / ActionSecondary for new code.

Spacing uses Radix gap="3" (same as Dialog.Footer). By default the action cluster is role="group" with aria-labelledby pointing at the message; pass actionsAccessibilityLabel for role="region" plus aria-describedby tied to the message.

This component is based on the div element and supports common margin props m, mx, my, ml, mr, mt, mb.

Provides width and height for the icon associated with the callout. This component is based on the div element.

Renders the callout text. This component is based on the p element.

Ghost Button, size 2. Accepts normal Button props except color, ghost, size, and type (fixed by the design system). Place before CalloutActionPrimary in the tree (render order is secondary left, primary right).

Gray surface Button, size 2. Same restricted props as ActionSecondary.

Use CalloutActionSecondary and CalloutActionPrimary with onClick (and loading, disabled, etc.) like Dialog.Footer.

<CalloutRoot color="gray">
  <CalloutIcon>
    <InfoCircledIcon />
  </CalloutIcon>
  <CalloutText>Finish setup to enable SSO for your organization.</CalloutText>
  <CalloutActionSecondary onClick={() => undefined}>
    Dismiss
  </CalloutActionSecondary>
  <CalloutActionPrimary onClick={() => undefined}>
    Continue
  </CalloutActionPrimary>
</CalloutRoot>

Use the color prop to control the color of the callout. The color and underlines of the links in callout text are adjusted automatically.

<Flex direction="column" gap="3">
  <CalloutRoot color="gray">
    <CalloutIcon>
      <InfoCircledIcon />
    </CalloutIcon>
    <CalloutText>
      Add the WorkOS <Link href="#">Admin Portal</Link> to your app to enable
      your users to create and configure SSO Connections themselves.
    </CalloutText>
  </CalloutRoot>

  <CalloutRoot color="green">
    <CalloutIcon>
      <InfoCircledIcon />
    </CalloutIcon>
    <CalloutText>
      Add the WorkOS <Link href="#">Admin Portal</Link> to your app to enable
      your users to create and configure SSO Connections themselves.
    </CalloutText>
  </CalloutRoot>

  <CalloutRoot color="yellow">
    <CalloutIcon>
      <InfoCircledIcon />
    </CalloutIcon>
    <CalloutText>
      Add the WorkOS <Link href="#">Admin Portal</Link> to your app to enable
      your users to create and configure SSO Connections themselves.
    </CalloutText>
  </CalloutRoot>

  <CalloutRoot color="red">
    <CalloutIcon>
      <InfoCircledIcon />
    </CalloutIcon>
    <CalloutText>
      Add the WorkOS <Link href="#">Admin Portal</Link> to your app to enable
      your users to create and configure SSO Connections themselves.
    </CalloutText>
  </CalloutRoot>

  <CalloutRoot color="purple">
    <CalloutIcon>
      <InfoCircledIcon />
    </CalloutIcon>
    <CalloutText>
      Add the WorkOS <Link href="#">Admin Portal</Link> to your app to enable
      your users to create and configure SSO Connections themselves.
    </CalloutText>
  </CalloutRoot>
</Flex>

Add a native WAI-ARIA alert role to the callout when the user’s immediate attention is required, like when an error message appears. The screen reader will be interrupted, announcing the new content immediately.

<CalloutRoot color="red" role="alert">
  <CalloutIcon>
    <ExclamationTriangleIcon />
  </CalloutIcon>
  <CalloutText>
    Access denied. Please contact the organization admin to view this page.
  </CalloutText>
</CalloutRoot>