OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Callout

Displays a short message to attract user’s attention.

Add the WorkOS Admin Portal to your app to enable your users to create and configure SSO Connections themselves.

 <Callout.Root>
  <Callout.Icon>
    <InfoCircledIcon />
  </Callout.Icon>
  <Callout.Text>
    Add the WorkOS Admin Portal to your app to enable your users to create and
    configure SSO Connections themselves.
  </Callout.Text>
</Callout.Root>

API Reference

The Callout component is made up of three parts: Root, Icon, and Text. View source

Root

Groups Icon and Text parts.

Prop	Type	Default
`color`	`"gray" \| "blue" \| "green" \| "yellow" \| "red"`	`"gray"`

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

Icon

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

Text

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

Examples

Colors

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

Add the WorkOS Admin Portal to your app to enable your users to create and configure SSO Connections themselves.

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

  <Callout.Root color="blue">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      Add the WorkOS <Link href="#">Admin Portal</Link> to your app to enable
      your users to create and configure SSO Connections themselves.
    </Callout.Text>
  </Callout.Root>

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

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

  <Callout.Root color="red">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      Add the WorkOS <Link href="#">Admin Portal</Link> to your app to enable
      your users to create and configure SSO Connections themselves.
    </Callout.Text>
  </Callout.Root>
</Flex>

As alert

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.

Access denied. Please contact the organization admin to view this page.

 <Callout.Root color="red" role="alert">
  <Callout.Icon>
    <ExclamationTriangleIcon />
  </Callout.Icon>
  <Callout.Text>
    Access denied. Please contact the organization admin to view this page.
  </Callout.Text>
</Callout.Root>