Callout

A callout is a short message to attract user's attention.

You will need admin privileges to install and access this application.

rx.callout(
    "You will need admin privileges to install and access this application.",
    icon="info",
)

The icon prop allows an icon to be passed to the callout component. See the icon component for all icons that are available.

As alert

Access denied. Please contact the network administrator to view this page.

rx.callout(
    "Access denied. Please contact the network administrator to view this page.",
    icon="triangle_alert",
    color_scheme="red",
    role="alert",
)

Style

Size

Use the size prop to control the size.

You will need admin privileges to install and access this application.

rx.flex(
    rx.callout(
        "You will need admin privileges to install and access this application.",
        icon="info",
        size="3",
    ),
    rx.callout(
        "You will need admin privileges to install and access this application.",
        icon="info",
        size="2",
    ),
    rx.callout(
        "You will need admin privileges to install and access this application.",
        icon="info",
        size="1",
    ),
    direction="column",
    spacing="3",
    align="start",
)

Variant

Use the variant prop to control the visual style. It is set to soft by default.

You will need admin privileges to install and access this application.

rx.flex(
    rx.callout(
        "You will need admin privileges to install and access this application.",
        icon="info",
        variant="soft",
    ),
    rx.callout(
        "You will need admin privileges to install and access this application.",
        icon="info",
        variant="surface",
    ),
    rx.callout(
        "You will need admin privileges to install and access this application.",
        icon="info",
        variant="outline",
    ),
    direction="column",
    spacing="3",
)

Color

Use the color_scheme prop to assign a specific color, ignoring the global theme.

You will need admin privileges to install and access this application.

rx.flex(
    rx.callout(
        "You will need admin privileges to install and access this application.",
        icon="info",
        color_scheme="blue",
    ),
    rx.callout(
        "You will need admin privileges to install and access this application.",
        icon="info",
        color_scheme="green",
    ),
    rx.callout(
        "You will need admin privileges to install and access this application.",
        icon="info",
        color_scheme="red",
    ),
    direction="column",
    spacing="3",
)

High Contrast

Use the high_contrast prop to add additional contrast.

You will need admin privileges to install and access this application.

rx.flex(
    rx.callout(
        "You will need admin privileges to install and access this application.",
        icon="info",
    ),
    rx.callout(
        "You will need admin privileges to install and access this application.",
        icon="info",
        high_contrast=True,
    ),
    direction="column",
    spacing="3",
)

API Reference

Callout

A short message to attract user's attention.

Basic Callout

Prop	Type	Description
`text`	str	The text of the callout.
`icon`	str	The icon of the callout.
`as_child`	bool	Change the default rendered element for the one passed as a child, merging their props and behavior.
`size`	Literal	Size "1" - "3"
`variant`	Literal	Variant of button: "soft" \| "surface" \| "outline"
`color_scheme`	Literal	Override theme color for button
`high_contrast`	bool	Whether to render the button with higher contrast color against background

Event Triggers

See the full list of default event triggers

CalloutRoot

Groups Icon and Text parts of a Callout.

You will need admin privileges to install and access this application.

Prop	Type	Description
`as_child`	bool	Change the default rendered element for the one passed as a child, merging their props and behavior.
`size`	Literal	Size "1" - "3"
`variant`	Literal	Variant of button: "soft" \| "surface" \| "outline"
`color_scheme`	Literal	Override theme color for button
`high_contrast`	bool	Whether to render the button with higher contrast color against background