极简空态

empty-state · minimal · 灵感来源：Refactoring UI（图标块 + 文字层级）

还没有发布记录

第一次发布后，版本、负责人和回滚点会出现在这里。

没有匹配「dark mode」的记录

换个关键词，或把筛选清掉。

复用卡

Empty State · 极简空态 · 空态 / Minimal

规格 · 术语提示词（给 AI 用）

做一个 Empty State（极简空态）：
- 同一份 props（title / description / icon / action）
- 无模糊、无浮起；实底图标砖 + 发丝边，圆角收到 --radius-lg 下一档
- 文案与动作规则同玻璃空态
用这些 CSS 变量：--color-accent --color-divider --color-surface --color-text --color-text-muted --color-text-subtle --text-base --text-xs
灵感参考：Refactoring UI（图标块 + 文字层级）

参数（CSS 变量）

--color-accent --color-divider --color-surface --color-text --color-text-muted --color-text-subtle --text-base --text-xs

必缺状态

（无必缺状态）

整页场景

（尚未接进整页场景）

安装（一条链接）

/r/empty-state--minimal.json

免外壳的 markdown 版：/llms/components/empty-state--minimal.md

参考（本站可核对）

本站实样标准 states 调研笔记

调研笔记

极简空态

与玻璃空态同一份 props（title / description / icon / action）
图标块用实底 + 发丝边，没有模糊；文字层级不变
三件套、单动作、aria 规则同玻璃空态

实现

empty-state/minimal

import { type ReactNode } from 'react';

interface Props {
  title: string;
  description?: string;
  icon?: ReactNode;
  /** 一个主操作；多个动作会让空态变成第二个工具栏 */
  action?: ReactNode;
  className?: string;
}

/** 空态：零数据不是"页面坏了"，要说清是什么空了、下一步做什么 */
export function MinimalEmptyState({ title, description, icon, action, className = '' }: Props) {
  return (
    <div className={`flex flex-col items-center justify-center gap-3 px-6 py-14 text-center ${className}`}>
      {icon && (
        <div
          className="
            grid place-items-center size-11 rounded-xl
            bg-[var(--color-surface)] border border-[var(--color-divider)]
            text-[var(--color-text-subtle)]
          "
          aria-hidden="true"
        >
          {icon}
        </div>
      )}
      <p className="text-[length:var(--text-base)] font-medium text-[var(--color-text)]">{title}</p>
      {description && (
        <p className="text-[length:var(--text-xs)] text-[var(--color-text-muted)] max-w-sm leading-relaxed">
          {description}
        </p>
      )}
      {action}
    </div>
  );
}

元信息

标识: empty-state/minimal
状态: done
最后提交: 2026-11-01
风格轴: minimal
依赖 token: --color-accent --color-divider --color-surface --color-text --color-text-muted --color-text-subtle --text-base --text-xs

在工作台打开源码与 notes 都在 src/components/empty-state/minimal/