Guide Recipes EmptyState

Recipe: Empty list / empty search results (EmptyState)

This recipe shows a standard “empty state” pattern.

Goal:

• When data is empty, show a friendly panel with icon + title + description
• Optionally provide a primary action (“Create”, “New”, “Import”)

Building blocks

• EmptyState component (empty_state())
• Button (use empty_state_primary_action(...) or build your own)

Example: Empty list with a create action

use gpui::{div, px};
use yororen_ui::component::{empty_state, empty_state_primary_action};

fn render_list_or_empty(items_len: usize) -> impl gpui::IntoElement {
    if items_len == 0 {
        return div()
            .pt_6()
            .flex()
            .justify_center()
            .child(
                empty_state()
                    .max_width(px(480.))
                    .title("没有数据")
                    .description("当前列表为空。你可以创建一个新的条目。")
                    .action(empty_state_primary_action("新建")),
            );
    }

    // Otherwise render the list.
    div().child("TODO: list")
}

Example: Empty search results

use gpui::div;
use yororen_ui::component::empty_state;

fn render_search_results(query: &str, results_len: usize) -> impl gpui::IntoElement {
    if results_len == 0 {
        return div().pt_6().child(
            empty_state()
                .title("没有结果")
                .description(format!("没有找到与 \"{}\" 匹配的内容。", query)),
        );
    }

    div().child("TODO: results")
}