EmptyState

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { EmptyState } from "@hua-labs/ui/advanced/dashboard";

size="sm"

size="md" (default)

size="lg"

Props


`icon`	`IconName \| React.ReactNode`	`"inbox"`	Icon to display. Can be an icon name string or custom React node
`title*`	`string`	-	Main title text
`description`	`string`	-	Description text below the title
`actionText`	`string`	-	Text for the action button
`actionHref`	`string`	-	URL for the action button (renders as link)
`variant`	`"default" \| "warning" \| "info" \| "error" \| "success"`	`"default"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the empty state
`onAction`	`() => void`	-	Callback function when action button is clicked
`secondaryActionText`	`string`	-	Text for the secondary action button
`onSecondaryAction`	`() => void`	-	Callback function when secondary action button is clicked
`bordered`	`boolean`	`false`	Whether to show border around the empty state

docs:common.basicUsage

Example1.tsxtsx

import { EmptyState } from "@hua-labs/ui";

export function BasicEmptyState() {
  return (
    <EmptyState
      icon="inbox"
      title="No data to display"
      description="Try adding some items to get started."
    />
  );
}

docs:components.emptyState.demo.withAction

Example2.tsxtsx

import { EmptyState } from "@hua-labs/ui";

export function EmptyStateWithAction() {
  return (
    <EmptyState
      icon="plus"
      title="No projects yet"
      description="Create your first project to get started."
      actionText="Create Project"
      onAction={() => console.log("Create!")}
    />
  );
}

docs:common.variants

Example3.tsxtsx

import { EmptyState } from "@hua-labs/ui";

export function EmptyStateVariants() {
  return (
    <div className="space-y-8">
      <EmptyState
        icon="info"
        title="No information"
        variant="info"
      />
      <EmptyState
        icon="warning"
        title="Warning"
        description="This requires attention"
        variant="warning"
      />
      <EmptyState
        icon="x"
        title="Error occurred"
        variant="error"
      />
      <EmptyState
        icon="check"
        title="All done"
        variant="success"
      />
    </div>
  );
}

•Semantic structure: Uses heading element for title and paragraph for description
•Action labeling: Action button includes aria-label for screen readers
•Color contrast: All variants maintain WCAG 2.1 AA color contrast ratios

LoadingSpinner ThemeToggle