Reflex Logo
Docs Logo
Library

/

Data Display

/

Callout

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

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

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

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.

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.

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.

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.

API Reference

rx.callout

A short message to attract user's attention.

PropType | ValuesDefaultInteractive
access_key
str
-
auto_capitalize
"off" | "none" | ...
-
content_editable
Union["inherit" | "plaintext-only", bool]
-
context_menu
str
-
dir
str
-
draggable
bool
-
enter_key_hint
"enter" | "done" | ...
-
hidden
bool
-
input_mode
"none" | "text" | ...
-
item_prop
str
-
lang
str
-
role
"alert" | "alertdialog" | ...
-
slot
str
-
spell_check
bool
-
tab_index
int
-
title
str
-
as_child
bool
-
size
"1" | "2" | ...
-
variant
"soft" | "surface" | ...
-
color_scheme
"tomato" | "red" | ...
-
high_contrast
bool
-
text
str
-
icon
str
-

rx.callout.root

Groups Icon and Text parts of a Callout.

PropType | ValuesDefaultInteractive
access_key
str
-
auto_capitalize
"off" | "none" | ...
-
content_editable
Union["inherit" | "plaintext-only", bool]
-
context_menu
str
-
dir
str
-
draggable
bool
-
enter_key_hint
"enter" | "done" | ...
-
hidden
bool
-
input_mode
"none" | "text" | ...
-
item_prop
str
-
lang
str
-
role
"alert" | "alertdialog" | ...
-
slot
str
-
spell_check
bool
-
tab_index
int
-
title
str
-
as_child
bool
-
size
"1" | "2" | ...
-
variant
"soft" | "surface" | ...
-
color_scheme
"tomato" | "red" | ...
-
high_contrast
bool
-

rx.callout.icon

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

PropType | ValuesDefaultInteractive
access_key
str
-
auto_capitalize
"off" | "none" | ...
-
content_editable
Union["inherit" | "plaintext-only", bool]
-
context_menu
str
-
dir
str
-
draggable
bool
-
enter_key_hint
"enter" | "done" | ...
-
hidden
bool
-
input_mode
"none" | "text" | ...
-
item_prop
str
-
lang
str
-
role
"alert" | "alertdialog" | ...
-
slot
str
-
spell_check
bool
-
tab_index
int
-
title
str
-

rx.callout.text

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

PropType | ValuesDefaultInteractive
access_key
str
-
auto_capitalize
"off" | "none" | ...
-
content_editable
Union["inherit" | "plaintext-only", bool]
-
context_menu
str
-
dir
str
-
draggable
bool
-
enter_key_hint
"enter" | "done" | ...
-
hidden
bool
-
input_mode
"none" | "text" | ...
-
item_prop
str
-
lang
str
-
role
"alert" | "alertdialog" | ...
-
slot
str
-
spell_check
bool
-
tab_index
int
-
title
str
-

Built with Reflex