High Level

Low Level

Callout

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

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 component for all icons that are available.

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

As alert

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

Style

Size

Use the size prop to control the size.

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

Expand

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.

Expand

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.

Expand

High Contrast

Use the high_contrast prop to add additional contrast.

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

API Reference

rx.callout.root

Groups Icon and Text parts of a Callout.

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

size="1",

variant="soft",

color_scheme="tomato",

high_contrast=False,

)

size

variant

color_scheme

high_contrast

Props

Prop	Type	Description
`access_key`	`str`	Provides a hint for generating a keyboard shortcut for the current element.
`auto_capitalize`	`"off""none""on""sentences""words""characters"`	Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
`content_editable`	`"inherit""plaintext-only"`	Indicates whether the element's content is editable.
`context_menu`	`str`	Defines the ID of a <menu> element which will serve as the element's context menu.
`dir`	`str`	Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).
`draggable`	`bool`	Defines whether the element can be dragged.
`enter_key_hint`	`"enter""done""go""next""previous""search""send"`	Hints what media types the media element is able to play.
`hidden`	`bool`	Defines whether the element is hidden.
`input_mode`	`"none""text""tel""url""email""numeric""decimal""search"`	Defines the type of the element.
`item_prop`	`str`	Defines the name of the element for metadata purposes.
`lang`	`str`	Defines the language used in the element.
`role`	`"alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem"`	Defines the role of the element.
`slot`	`str`	Assigns a slot in a shadow DOM shadow tree to an element.
`spell_check`	`bool`	Defines whether the element may be checked for spelling errors.
`tab_index`	`int`	Defines the position of the current element in the tabbing order.
`title`	`str`	Defines a tooltip for the element.
`as_child`	`bool`	Change the default rendered element for the one passed as a child, merging their props and behavior.
`size`	`"1""2""3"`	Size "1" - "3".
`variant`	`"soft""surface""outline"`	Variant of button: "soft" \| "surface" \| "outline".
`color_scheme`	`"tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray"`	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

rx.callout.icon

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

Props

Prop	Type	Description
`access_key`	`str`	Provides a hint for generating a keyboard shortcut for the current element.
`auto_capitalize`	`"off""none""on""sentences""words""characters"`	Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
`content_editable`	`"inherit""plaintext-only"`	Indicates whether the element's content is editable.
`context_menu`	`str`	Defines the ID of a <menu> element which will serve as the element's context menu.
`dir`	`str`	Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).
`draggable`	`bool`	Defines whether the element can be dragged.
`enter_key_hint`	`"enter""done""go""next""previous""search""send"`	Hints what media types the media element is able to play.
`hidden`	`bool`	Defines whether the element is hidden.
`input_mode`	`"none""text""tel""url""email""numeric""decimal""search"`	Defines the type of the element.
`item_prop`	`str`	Defines the name of the element for metadata purposes.
`lang`	`str`	Defines the language used in the element.
`role`	`"alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem"`	Defines the role of the element.
`slot`	`str`	Assigns a slot in a shadow DOM shadow tree to an element.
`spell_check`	`bool`	Defines whether the element may be checked for spelling errors.
`tab_index`	`int`	Defines the position of the current element in the tabbing order.
`title`	`str`	Defines a tooltip for the element.

Event Triggers

See the full list of default event triggers

rx.callout.text

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

Props

Prop	Type	Description
`access_key`	`str`	Provides a hint for generating a keyboard shortcut for the current element.
`auto_capitalize`	`"off""none""on""sentences""words""characters"`	Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
`content_editable`	`"inherit""plaintext-only"`	Indicates whether the element's content is editable.
`context_menu`	`str`	Defines the ID of a <menu> element which will serve as the element's context menu.
`dir`	`str`	Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).
`draggable`	`bool`	Defines whether the element can be dragged.
`enter_key_hint`	`"enter""done""go""next""previous""search""send"`	Hints what media types the media element is able to play.
`hidden`	`bool`	Defines whether the element is hidden.
`input_mode`	`"none""text""tel""url""email""numeric""decimal""search"`	Defines the type of the element.
`item_prop`	`str`	Defines the name of the element for metadata purposes.
`lang`	`str`	Defines the language used in the element.
`role`	`"alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem"`	Defines the role of the element.
`slot`	`str`	Assigns a slot in a shadow DOM shadow tree to an element.
`spell_check`	`bool`	Defines whether the element may be checked for spelling errors.
`tab_index`	`int`	Defines the position of the current element in the tabbing order.
`title`	`str`	Defines a tooltip for the element.

Event Triggers

See the full list of default event triggers

Learn

Components

API Reference

Enterprise

Core

Graphing

Other

Custom Components

Callout

As alert

Style

Size

Variant

Color

High Contrast

API Reference

rx.callout.root

Props

Event Triggers

rx.callout.icon

Props

Event Triggers

rx.callout.text

Props

Event Triggers