Guide Recipes EmptyState

Recipe: Empty state

The "no data" / "no results" pattern using empty_state. Skip the parent component's normal render and show the empty state as a full panel.

use yororen_ui::ActionVariantKind;
use yororen_ui::headless::button::button;
use yororen_ui::headless::empty_state::empty_state;
use yororen_ui::headless::icon::IconSource;

if self.projects.is_empty() {
    return div().size_full().flex().flex_col().items_center().justify_center().p_6().gap_3()
        .child(empty_state("projects-empty", &mut *cx)
            .icon(IconSource::Builtin("info".into()))
            .title("No projects yet")
            .description("Create your first project to get started.")
            .render(cx))
        .child(button("projects-create", cx)
            .variant(ActionVariantKind::Primary)
            .on_click(|_, _, _| { /* dispatch create flow */ })
            .render(cx).child("New project"));
}

div().child(/* … the projects list … */)

Pairing with virtual_list

The cleanest shape is to branch at the parent level — render empty_state when the data is empty, otherwise render the list. Don't render an empty virtual_list (gpui's underlying list refuses to lay out an empty range):

if items.is_empty() {
    return div().child(empty_state("list-empty", &mut *cx).title("Nothing here yet").render(cx));
}
virtual_list("items", &controller, cx).row(/* … */).render(cx)

Icon sources

empty_state.icon(...) accepts any IconSource:

• IconSource::Builtin("info".into()) — resolves to one of the 20+ bundled icons in yororen-ui-core/assets/icons/.
• IconSource::Resource("my/empty.svg".into()) — a path through your application's AssetSource (registered via Application::new().with_assets(...)). Use this for app-specific illustrations.

See also

• EmptyState — full API.
• Recipe: search + results.