Empty

Displays an empty state placeholder when there is no content.

No content yet

You haven't created any content. Get started by creating your first item.

Cài đặt

React

npx @galaxy-stack/nebula-cli add empty

Vue

npx @galaxy-stack/nebula-cli add empty

Angular

npx @galaxy-stack/nebula-cli add empty

Usage

React

import { Empty } from '@/components/empty'
import { Button } from '@/components/button'

export default function EmptyDemo() {
  return (
    <Empty description="No data available">
      <Button>Create New</Button>
    </Empty>
  )
}

Vue

<script setup lang="ts">
import { Empty } from '@/components/empty'
import { Button } from '@/components/button'
</script>

<template>
  <Empty description="No data available">
    <Button>Create New</Button>
  </Empty>
</template>

Angular

import { Component } from '@angular/core'
import { EmptyComponent } from '@/components/empty'
import { ButtonDirective } from '@/components/button'

@Component({
  selector: 'app-empty-demo',
  standalone: true,
  imports: [EmptyComponent, ButtonDirective],
  template: `
    <ui-empty description="No data available">
      <button gButton>Create New</button>
    </ui-empty>
  `
})
export class EmptyDemo {}

API Reference

Props

Prop	Type	Default	Mô tả	Frameworks
description	ReactNode	-	Nội dung mô tả empty state	All
image	ReactNode	-	Nội dung icon hoặc hình ảnh tùy chỉnh	All
imageAlt	string	'Empty'	Nhãn truy cập cho minh họa mặc định	All
className	string	''	CSS class cho container	All
children	ReactNode	-	Nội dung action tùy chọn bên dưới mô tả	All

Examples

Custom Image

React

<Empty
  image={<img src="/empty.svg" alt="No data" className="w-32 h-32" />}
  description="No items found"
/>

With Action Button

React

<Empty description="No projects yet">
  <Button onClick={() => navigate('/create')}>
    Create First Project
  </Button>
</Empty>

Khả năng truy cập

• Điều hướng bàn phím: [TODO]
• Đọc màn hình: [TODO]
• Quản lý focus: [TODO]
• Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)