Feedback Components¶

Feedback components communicate system state — errors, loading, empty data — to the user.

Alert¶

An inline banner for messages, warnings, and errors.

Signature

Alert(message, *, variant="info", dismissable=False, on_dismiss=None)

Parameter	Type	Default	Description
`message`	`str` \| callable	—	The message to display
`variant`	`str`	`"info"`	Color scheme: `"info"` \| `"success"` \| `"warning"` \| `"danger"`
`dismissable`	`bool`	`False`	Show a close button
`on_dismiss`	`Callable` \| `None`	`None`	Called when the close button is clicked

Example

ui.Alert("Your changes have been saved.", variant="success")
ui.Alert("Low disk space detected.", variant="warning")
ui.Alert("Connection failed. Please retry.", variant="danger")
ui.Alert("Tip: Use Ctrl+K to open the command palette.", variant="info")

# Dismissable
show_alert = ui.state(True)

if show_alert.value:
    ui.Alert(
        "Welcome back! Check out the new features.",
        variant="info",
        dismissable=True,
        on_dismiss=lambda: show_alert.set(False),
    )

# Conditional alert
error_msg = ui.state("")

if error_msg.value:
    ui.Alert(error_msg, variant="danger")

Skeleton¶

A loading placeholder that mimics the shape of real content. Use it while async data is being fetched.

Signature

Skeleton(*, width="100%", height="1rem", rounded=False)

Parameter	Type	Default	Description
`width`	`str`	`"100%"`	CSS width of the placeholder
`height`	`str`	`"1rem"`	CSS height of the placeholder
`rounded`	`bool`	`False`	Use `border-radius: 50%` for circular avatars

Example

is_loading = ui.state(True)

if is_loading.value:
    with ui.Column(gap="var(--s-3)"):
        ui.Skeleton(width="60%", height="1.5rem")          # heading placeholder
        ui.Skeleton(width="100%", height="1rem")           # body line
        ui.Skeleton(width="80%", height="1rem")            # body line
        ui.Skeleton(width="40px", height="40px", rounded=True)  # avatar
else:
    ui.Heading("Real content", level=2)
    ui.Text("The data has loaded.")

Empty¶

An empty-state illustration shown when a list or dataset has no items.

Signature

Empty(*, title="No data", description="", icon="📭")

Parameter	Type	Default	Description
`title`	`str`	`"No data"`	Bold title text
`description`	`str`	`""`	Muted subtitle or instruction
`icon`	`str`	`"📭"`	Emoji or icon shown above the title

Example

results = ui.state([])

if results.value:
    ui.Table(data=results)
else:
    ui.Empty(
        title="No results found",
        description="Try adjusting your search filters.",
        icon="🔍",
    )

Spinner¶

An animated loading spinner.

Signature

Spinner(*, size="md")

Parameter	Type	Default	Description
`size`	`str`	`"md"`	Spinner size: `"sm"` \| `"md"` \| `"lg"`

Example

is_fetching = ui.state(False)

if is_fetching.value:
    with ui.Row(align="center", gap="var(--s-2)"):
        ui.Spinner(size="sm")
        ui.Text("Loading…", variant="muted")
else:
    ui.Table(data=rows)

# Large centered spinner
with ui.Column(align="center", justify="center"):
    ui.Spinner(size="lg")