Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Datadisplay

/

Callout

/

Low

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

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

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

The callout component is made up of a callout.root, which groups callout.icon and callout.text parts. This component is based on the div element and supports common margin props.

The callout.icon provides width and height for the icon associated with the callout. This component is based on the div element. See the icon component for all icons that are available.

The callout.text renders the callout text. This component is based on the p element.

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

Use the size prop to control the size.

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

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

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

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

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.

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

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

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

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.

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

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

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

Use the high_contrast prop to add additional contrast.

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

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

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

A short message to attract user's attention.

Basic Callout

PropTypeDescriptionValues
textstr

The text of the callout.

iconstr

The icon of the callout.

as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

sizeLiteral

Size "1" - "3"

variantLiteral

Variant of button: "soft" | "surface" | "outline"

color_schemeLiteral

Override theme color for button

high_contrastbool

Whether to render the button with higher contrast color against background

Event Triggers

No component specific event triggers

Groups Icon and Text parts of a Callout.

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

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

sizeLiteral

Size "1" - "3"

variantLiteral

Variant of button: "soft" | "surface" | "outline"

color_schemeLiteral

Override theme color for button

high_contrastbool

Whether to render the button with higher contrast color against background

Event Triggers

No component specific event triggers

Provides width and height for the icon associated with the callout.

Props

No component specific props

Event Triggers

No component specific event triggers

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

Props

No component specific props

Event Triggers

No component specific event triggers

Did you find this useful?