ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Data display

Callout

rx.calloutrx.callout.rootrx.callout.iconrx.callout.text

Official docs

Workshop order

At the top of the checkout page, show a prominent 'Your card was declined' warning, and below it add a quiet shipping notice.

rx.callout is a short notice that needs to catch the user's eye. Pass the text as the first argument and the name of the leading icon as icon. Icon names are the Lucide names from the Icon page.

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",
)

Try the props

Your trial ends in 3 days.

text

icon

size

variant

color

high_contrast

rx.callout("Your trial ends in 3 days.", icon="info", size="2", variant="soft", color_scheme="indigo", high_contrast=False)

size picks the size, variant the fill style and color_scheme the color. Change the icon name and the leading icon changes.

Prop	Values	Default	Use
First argument (`text`)	Text	Required	The notice text
`icon`	Lucide icon name	None	Leading icon; without it, text only
`size`	`"1"` `"2"` `"3"`	`"2"`	Font size and inner padding
`variant`	`"soft"` `"surface"` `"outline"`	`"soft"`	Fill style
`color_scheme`	Radix color name	Theme color	Color that conveys the kind of notice
`high_contrast`	`True` / `False`	`False`	Stronger contrast
`role`	`"alert"` etc.	None	Role announced to screen readers

As a warning

Make it red, add a warning icon and set role="alert", and screen readers read the text out right away. Use it for things users must know immediately, such as errors or denied access.

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",
)

Size and variant

size runs from "1" to "3". Larger numbers mean larger text and more padding.

Size 3

Size 2

Size 1

rx.flex(
    rx.callout("Size 3", icon="info", size="3"),
    rx.callout("Size 2", icon="info", size="2"),
    rx.callout("Size 1", icon="info", size="1"),
    direction="column",
    spacing="3",
    align="start",
)

There are three variants: the default "soft" (pale background), "surface" (pale background with a border) and "outline" (border only).

soft (default)

surface

outline

rx.flex(
    rx.callout("soft (default)", icon="info", variant="soft"),
    rx.callout("surface", icon="info", variant="surface"),
    rx.callout("outline", icon="info", variant="outline"),
    direction="column",
    spacing="3",
)

Color and contrast

color_scheme sets the notice's color regardless of the theme. Separate success, caution and failure by color, and the kind of notice shows before anyone reads it.

Your changes were saved.

Your trial ends in 3 days.

Payment failed.

rx.flex(
    rx.callout("Your changes were saved.", icon="circle_check", color_scheme="green"),
    rx.callout("Your trial ends in 3 days.", icon="clock", color_scheme="amber"),
    rx.callout("Payment failed.", icon="circle_x", color_scheme="red"),
    direction="column",
    spacing="3",
)

high_contrast=True darkens the text to increase contrast.

Default contrast

High contrast

rx.flex(
    rx.callout("Default contrast", icon="info"),
    rx.callout("High contrast", icon="info", high_contrast=True),
    direction="column",
    spacing="3",
)

Assembling the parts yourself

rx.callout("text", icon=…) is really a shortcut that builds three parts at once. Put rx.callout.icon (the icon slot) and rx.callout.text (the text slot) inside rx.callout.root and you get the same result. Assemble it this way when you want a link in the middle of the text or separate props on the icon. The styling props (size, variant, color_scheme, high_contrast) go on root.

You will need admin privileges to install this application.

rx.callout.root(
    rx.callout.icon(rx.icon("info")),
    rx.callout.text(
        "You will need ",
        rx.link("admin privileges", href="#"),
        " to install this application.",
    ),
    color_scheme="blue",
)

Filling the order

The declined payment gets a large red warning; the shipping notice stays quiet with surface and a small size.

Your card was declined. Please use another payment method.

Orders placed after 3 PM ship the next business day.

rx.flex(
    rx.callout(
        "Your card was declined. Please use another payment method.",
        icon="triangle_alert",
        color_scheme="red",
        role="alert",
    ),
    rx.callout.root(
        rx.callout.icon(rx.icon("info")),
        rx.callout.text("Orders placed after 3 PM ship the next business day."),
        variant="surface",
        size="1",
    ),
    direction="column",
    spacing="3",
)

Workshop notes

Make a short notice with rx.callout("text", icon="info").
size "1" to "3", variant: soft (default) · surface · outline; color_scheme conveys the kind of notice.
For errors users must see right away: color_scheme="red" and role="alert".
To put links or other content inside the text, assemble callout.root + callout.icon + callout.text.

← Previous

Data display · Icon

Data display · List

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.