 <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>

Props

No props data available for Callout.

Usage

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.

 <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.

 <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>

Variants

Admin Portal

4 variants found

Destructive callout in Azure Sentinel Data Collection Endpoint Formadmin-portal

/p/:portalSessionId/log-streams/:logStreamId/azure-sentinel

color=red

Destructive callout in Step Error Summaryadmin-portal

color=red

Informational callout in Directory Filtered Groups Cardadmin-portal

/p/:portalSessionId/directory-sync/:directoryId/completed

color=blue

Informational callout in Directory Role Mapping Cardadmin-portal

/p/:portalSessionId/directory-sync/:directoryId/completed

color=blue

Dashboard

11 variants found

Callout in Configure Workos Email Provider Dialogdashboard

Callout in Billing Information Requireddashboard

color=gray

Callout in Allow List V2dashboard

color=gray

Success callout in Step 2 Credentialsdashboard

/:environmentId/identity-bridge/auth0/components/steps

color=green

Success callout in Step 2 Credentialsdashboard

/:environmentId/identity-bridge/auth0/components/steps

color=green

Warning callout in Configure Workos Email Provider Dialogdashboard

color=yellow

Warning callout in Delete Custom Domain Dialog Contentdashboard

/domains

color=yellow

Warning size 1 callout in Configure Mfa Auth Dialogdashboard

color=yellowsize=1

Warning size 1 callout in Email Suppression Carddashboardstatic

<Callout.Root
                color="yellow"
                size="1"
                style={{
                  alignItems: 'center',
                  display: 'flex',
                  justifyContent: 'space-between',
                }}
              >
                <Flex align="center" gap="2" pl="2">
                  <Callout.Icon>
                    <ExclamationTriangleIcon />
                  </Callout.Icon>
                  <Callout.Text>
                    <u>{email}</u> was suppressed by{' '}
                    {providerName ?? 'your email provider'}
                    {getSuppressionTypeLabel(firstSuppression?.type)}
                  </Callout.Text>
                </Flex>
                <Button onClick={() => setIsDialogOpen(true)}>
                  Re-enable email
                </Button>
              </Callout.Root>

color=yellowsize=1

Destructive size 1 callout in Upsert Organization Dialogdashboard

color=redsize=1

Context

Usage

Used 539 times across 2 packages

Dashboard

433

Admin Portal

106

Variant Distribution

color

red

60%

gray

20%

yellow

17%

green

blue

size

60%

40%

weight

bold

100%

wrap

balance

100%

Where it's used

145 files

packages/dashboard/src/components/connections/connection-sessions/session-errors.tsx50

packages/dashboard/src/components/users/email-suppression-card.tsx9

packages/dashboard/src/legacy-pages/branding/index.tsx9

packages/dashboard/src/components/billing/new-customer-billing-form.tsx6

packages/dashboard/src/components/configuration/oauth-settings/oauth-settings-modal.tsx6

packages/dashboard/src/components/emails/providers/configure-custom-email-provider-dialog.tsx6

packages/dashboard/src/components/emails/providers/configure-workos-email-provider-dialog.tsx6

packages/dashboard/src/components/organizations/organization/domain-policy-dialog.tsx6

/:environmentId/identity-bridge/auth0/components/steps

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/identity-bridge/auth0/components/steps/step-2-credentials.tsx9

/domains

packages/dashboard/src/app/(private)/(sidebar)/domains/delete-custom-domain-dialog-content.tsx6

Show 135 more files

Callout

On this page

Props

Usage

Colors

As alert

Variants

Admin Portal

Dashboard

Context

Usage Statistics

Usage

Variant Distribution

Where it's used