Component EmptyState

EmptyState

An empty state panel: icon + title + description + optional action slot.

This is a component-level primitive for consistent “no data / nothing found” UI.

When to use

• Empty lists: “No servers yet”, “No results”, “No mods installed”
• Post-filter / post-search empty results

Not a good fit:

• Error states with technical details (prefer a dedicated error panel or toast)

API

• empty_state(): constructor (uses caller location to generate a default id)
• id(...): stable identity override
• icon(Icon): override icon
• title("..."): set title text
• description("..."): set description text
• action(IntoElement): optional action slot (usually a Button)
• max_width(px(...)): constrain width

Helper:

• empty_state_primary_action("..."): convenience builder for a primary action button

Defaults

• Background: theme.surface.raised (aligned with Modal panel)
• Border: theme.border.default
• Max width: 420px

Example

use yororen_ui::component::{empty_state, empty_state_primary_action};

let view = empty_state()
    .title("没有数据")
    .description("当前列表为空。你可以创建一个新的条目，或调整筛选条件。")
    .action(empty_state_primary_action("新建"));

Recipes

• Guide-Recipes-EmptyState