> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). For a Markdown version, remove the trailing slash from the page URL and append `.md`. The docs home is available at [index.md](http://localhost:3000/docs/index.md). [High Level](https://reflex.dev/docs/library/data-display/callout/) [Low Level](https://reflex.dev/docs/library/data-display/callout/low/) # Callout A `callout` is a short message to attract user's attention. [Start Building Now!](https://build.reflex.dev/) 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.](https://reflex.dev/docs/library/data-display/icon/) The `callout.text` renders the callout text. This component is based on the `p` element. ## As alert [Start Building Now!](https://build.reflex.dev/) Access denied. Please contact the network administrator to view this page. ## Style ### Size Use the `size` prop to control the size. [Start Building Now!](https://build.reflex.dev/) 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. ### Variant Use the `variant` prop to control the visual style. It is set to `soft` by default. [Start Building Now!](https://build.reflex.dev/) 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. ### Color Use the `color_scheme` prop to assign a specific color, ignoring the global theme. [Start Building Now!](https://build.reflex.dev/) 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. ### High Contrast Use the `high_contrast` prop to add additional contrast. [Start Building Now!](https://build.reflex.dev/) You will need admin privileges to install and access this application. You will need admin privileges to install and access this application. ## API Reference ## Shared HTML props Components linked to this section accept these HTML props. Component-specific additions and overrides are listed below. ### 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 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. | ## 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 | | --- | --- | --- | | `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. | Also accepts the [shared HTML props](https://reflex.dev/docs/library/data-display/callout/low/#shared-html-props) . ### Event Triggers [See the full list of default event triggers](https://reflex.dev/docs/api-reference/event-triggers/) ## rx.callout.icon Provides width and height for the icon associated with the callout. ### Props No component specific props Also accepts the [shared HTML props](https://reflex.dev/docs/library/data-display/callout/low/#shared-html-props) . ### Event Triggers [See the full list of default event triggers](https://reflex.dev/docs/api-reference/event-triggers/) ## rx.callout.text Renders the callout text. This component is based on the p element. ### Props No component specific props Also accepts the [shared HTML props](https://reflex.dev/docs/library/data-display/callout/low/#shared-html-props) . ### Event Triggers [See the full list of default event triggers](https://reflex.dev/docs/api-reference/event-triggers/)