Empty 空状态

一块区域没有内容时的占位，说明为什么空以及接下来能做什么。

还没有书评

读完一本书之后，来写第一篇。

import { Button, Empty } from '@hina-ui/react'

export default function Demo() {
  return (
    <Empty
      title="还没有书评"
      description="读完一本书之后，来写第一篇。"
      className="w-96"
      actions={<Button size="sm">写书评</Button>}
    />
  )
}

tsx

用法

import { Empty } from '@hina-ui/react'

title 用一句话说明这里为什么是空的，description 补充下一步能做什么。图标、文字与操作从上到下居中排列，组件占满所在容器的宽度。

书架是空的

收藏的书会出现在这里。

import { Empty } from '@hina-ui/react'

export default function Demo() {
  return <Empty title="书架是空的" description="收藏的书会出现在这里。" className="w-96" />
}

tsx

示例

操作

actions 属性放置让用户脱离空状态的操作，通常是一个主要按钮，或者再加一个次要按钮。

还没有书单

把想一起读的书收进一份书单。

import { Button, Empty } from '@hina-ui/react'

export default function Demo() {
  return (
    <Empty
      title="还没有书单"
      description="把想一起读的书收进一份书单。"
      className="w-96"
      actions={
        <>
          <Button size="sm">新建书单</Button>
          <Button size="sm" variant="ghost" tone="neutral">
            了解书单
          </Button>
        </>
      }
    />
  )
}

tsx

图标

默认图标是一个收件箱。icon 属性换成更贴合场景的图标，例如搜索无结果时用带叉的放大镜；设为 false 时不显示图标。

没有匹配的结果

换个关键词试试。

没有匹配的结果

换个关键词试试。

import { SearchX } from 'lucide-react'
import { Empty, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="lg" align="start">
      <Empty
        title="没有匹配的结果"
        description="换个关键词试试。"
        className="w-72"
        icon={<SearchX className="text-muted size-8" />}
      />
      <Empty title="没有匹配的结果" description="换个关键词试试。" icon={false} className="w-72" />
    </Inline>
  )
}

tsx

插图

icon 属性也可以放图片。传入 icon 的内容不再套圆形底色，尺寸由内容自己决定。

收件箱空空如也

新的通知会第一时间送到这里。

import { Button, Empty, Image } from '@hina-ui/react'

export default function Demo() {
  return (
    <Empty
      title="收件箱空空如也"
      description="新的通知会第一时间送到这里。"
      className="w-96"
      icon={<Image src="/avatars/peek.webp" ratio={1} className="size-24 rounded-full" />}
      actions={
        <Button size="sm" variant="soft" tone="neutral">
          通知设置
        </Button>
      }
    />
  )
}

tsx

尺寸

三档尺寸同时改变图标、文字与内边距：sm 用于卡片内的小区域，md 是默认值，lg 用于整页的空状态。

没有评论

来说点什么。

没有评论

来说点什么。

没有评论

来说点什么。

import { Empty, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack gap="lg" className="w-96">
      <Empty size="sm" title="没有评论" description="来说点什么。" />
      <Empty title="没有评论" description="来说点什么。" />
      <Empty size="lg" title="没有评论" description="来说点什么。" />
    </Stack>
  )
}

tsx

放在面板里

作为列表或表格的空态时，直接放进 Panel 或 Card 的正文即可。

API

Props

属性	类型	默认值	说明
`title`	`string`	—	标题
`description`	`string`	—	标题下方的说明
`icon`	`boolean`	`true`	是否显示默认图标
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`children`	文字下方的额外内容
`icon`	替换默认图标的图标或插图
`actions`	最下方的操作

用法

示例

操作

图标

插图

尺寸

放在面板里

最近活动

无障碍

API

Props

内容属性