141 lines
3.9 KiB
Markdown
141 lines
3.9 KiB
Markdown
---
|
|
components:
|
|
- rx.radix.callout.root
|
|
- rx.radix.callout.icon
|
|
- rx.radix.callout.text
|
|
---
|
|
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Callout
|
|
|
|
A `callout` is a short message to attract user's attention.
|
|
|
|
```python demo
|
|
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.](/docs/library/radix/datadisplay/icon)
|
|
|
|
The `callout.text` renders the callout text. This component is based on the `p` element.
|
|
|
|
## As alert
|
|
|
|
```python demo
|
|
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",
|
|
)
|
|
```
|
|
|
|
## Style
|
|
|
|
### Size
|
|
|
|
Use the `size` prop to control the size.
|
|
|
|
```python demo
|
|
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",
|
|
)
|
|
```
|
|
|
|
### Variant
|
|
|
|
Use the `variant` prop to control the visual style. It is set to `soft` by default.
|
|
|
|
```python demo
|
|
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",
|
|
)
|
|
```
|
|
|
|
### Color
|
|
|
|
Use the `color_scheme` prop to assign a specific color, ignoring the global theme.
|
|
|
|
```python demo
|
|
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",
|
|
)
|
|
```
|
|
|
|
### High Contrast
|
|
|
|
Use the `high_contrast` prop to add additional contrast.
|
|
|
|
```python demo
|
|
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",
|
|
)
|
|
```
|