97 lines
2.9 KiB
Markdown
97 lines
2.9 KiB
Markdown
---
|
|
components:
|
|
- rx.radix.callout
|
|
- rx.radix.callout.root
|
|
- rx.radix.callout.icon
|
|
- rx.radix.callout.text
|
|
|
|
Callout: |
|
|
lambda **props: rx.callout("Basic Callout", icon="search", **props)
|
|
|
|
CalloutRoot: |
|
|
lambda **props: rx.callout.root(
|
|
rx.callout.icon(rx.icon(tag="info")),
|
|
rx.callout.text("You will need admin privileges to install and access this application."),
|
|
**props
|
|
)
|
|
---
|
|
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Callout
|
|
|
|
A `callout` is a short message to attract user's attention.
|
|
|
|
```python demo
|
|
rx.callout("You will need admin privileges to install and access this application.", icon="info")
|
|
```
|
|
|
|
The `icon` prop allows an icon to be passed to the `callout` component. See the [**icon** component for all icons that are available.](/docs/library/radix/datadisplay/icon)
|
|
|
|
## As alert
|
|
|
|
```python demo
|
|
rx.callout("Access denied. Please contact the network administrator to view this page.", icon="alert_triangle", color_scheme="red", role="alert")
|
|
```
|
|
|
|
## Style
|
|
|
|
### Size
|
|
|
|
Use the `size` prop to control the size.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.callout("You will need admin privileges to install and access this application.", icon="info", size="3",),
|
|
rx.callout("You will need admin privileges to install and access this application.", icon="info", size="2",),
|
|
rx.callout("You will need admin privileges to install and access this application.", icon="info", 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("You will need admin privileges to install and access this application.", icon="info", variant="soft",),
|
|
rx.callout("You will need admin privileges to install and access this application.", icon="info", variant="surface",),
|
|
rx.callout("You will need admin privileges to install and access this application.", icon="info", 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("You will need admin privileges to install and access this application.", icon="info", color_scheme="blue",),
|
|
rx.callout("You will need admin privileges to install and access this application.", icon="info", color_scheme="green",),
|
|
rx.callout("You will need admin privileges to install and access this application.", icon="info", color_scheme="red",),
|
|
direction="column",
|
|
spacing="3",
|
|
)
|
|
```
|
|
|
|
### High Contrast
|
|
|
|
Use the `high_contrast` prop to add additional contrast.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.callout("You will need admin privileges to install and access this application.", icon="info",),
|
|
rx.callout("You will need admin privileges to install and access this application.", icon="info", high_contrast=True,),
|
|
direction="column",
|
|
spacing="3",
|
|
)
|
|
```
|