Skip to content
Kappa
Kappa
Empty
@dicehub/kappav0.4.2

Empty

Explains absent content and guides the user toward a useful next action.

No simulation cases

Create a case or import an existing setup to start a simulation. 

<script setup>
import { Empty } from "@dicehub/kappa/components/empty";
import { Box, Plus, Upload } from "@lucide/vue";
import { Button } from "@dicehub/kappa/components/button";
</script>

<template>
  <Empty.Root class="case-empty">
    <Empty.Header>
      <Empty.Media variant="icon"><Box aria-hidden="true" /></Empty.Media>
      <Empty.Title>No simulation cases</Empty.Title>
      <Empty.Description>
        Create a case or import an existing setup to start a simulation.
      </Empty.Description>
    </Empty.Header>
    <Empty.Content>
      <Button size="sm" variant="primary" :icon="Plus">Create case</Button>
      <Button size="sm" variant="outline" :icon="Upload">Import case</Button>
    </Empty.Content>
  </Empty.Root>
</template>

Installation

Empty is part of the main Kappa package. It has no state machine because the component is presentational. The application decides when the state appears and whether changes need an announcement.

Barrel

import {
  Empty,
  EmptyRoot,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from "@dicehub/kappa";

Granular

import {
  Empty,
  EmptyRoot,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from "@dicehub/kappa/components/empty";

Usage

State what is absent, explain the reason when it helps, and provide one clear next action. Empty has no border or background by default, so it can sit inside tables, panels, and pages.

No results

Try a different name or clear the active filters.

<script setup>
import { Empty } from "@dicehub/kappa/components/empty";
</script>

<template>
  <Empty.Root>
    <Empty.Header>
      <Empty.Title>No results</Empty.Title>
      <Empty.Description>Try a different name or clear the active filters.</Empty.Description>
    </Empty.Header>
  </Empty.Root>
</template>

Composition

Typical part hierarchy
Empty.Root
├── Empty.Header
│   ├── Empty.Media
│   ├── Empty.Title
│   └── Empty.Description
└── Empty.Content

Use the compound API for readable templates. Named exports provide the same parts when a template or build rule prefers unaugmented components. Empty uses Kappa's size and visual rules.

<script setup>
import {
  EmptyRoot,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
} from "@dicehub/kappa/components/empty";
</script>

<template>
  <EmptyRoot size="sm">
    <EmptyHeader>
      <EmptyTitle>No results</EmptyTitle>
      <EmptyDescription>Try a different query.</EmptyDescription>
    </EmptyHeader>
  </EmptyRoot>
</template>

No Ark UI Empty primitive is available, so Kappa owns only this static structure and style.

Examples

Sizes

Use small inside dense panels, base for most surfaces, and large for primary page states.

sm empty state

No files are attached to this run.

base empty state

No files are attached to this run.

lg empty state

No files are attached to this run.

<Empty.Root size="sm">...</Empty.Root>
<Empty.Root size="base">...</Empty.Root>
<Empty.Root size="lg">...</Empty.Root>

Custom Media

The default media variant leaves custom visuals unchanged. Use the icon variant only for compact decorative icons.

No residual history

Residual values appear after the solver writes its first time step.

<Empty.Root>
  <Empty.Header>
    <Empty.Media>
      <ResidualPlotPreview aria-hidden="true" />
    </Empty.Media>
    <Empty.Title>No residual history</Empty.Title>
    <Empty.Description>
      Residual values appear after the solver writes its first time step.
    </Empty.Description>
  </Empty.Header>
</Empty.Root>

Avatar

Place one Avatar in the default media container for a person-specific empty state. When the visible title already names the person, use an empty image alternative to avoid repetition.

Mei Chen is offline

Leave a note for the project owner or continue the review later. 

<script setup>
import { Avatar } from "@dicehub/kappa/components/avatar";
import { Button } from "@dicehub/kappa/components/button";
import { Empty } from "@dicehub/kappa/components/empty";
</script>

<template>
  <Empty.Root size="sm">
    <Empty.Header>
      <Empty.Media>
        <Avatar.Root size="lg">
          <Avatar.Image src="/avatars/mei-chen.webp" alt="" />
          <Avatar.Fallback aria-hidden="true">MC</Avatar.Fallback>
          <Avatar.Badge role="img" aria-label="Offline" />
        </Avatar.Root>
      </Empty.Media>
      <Empty.Title>Mei Chen is offline</Empty.Title>
      <Empty.Description>
        Leave a note for the project owner or continue the review later.
      </Empty.Description>
    </Empty.Header>
    <Empty.Content><Button size="sm">Leave a note</Button></Empty.Content>
  </Empty.Root>
</template>

Avatar Group

An Avatar Group can suggest collaboration or team setup. Hide an illustrative group from assistive technology when the title and description contain the useful message.

No review team

Invite colleagues to review this simulation project.

<script setup>
import { Plus } from "@lucide/vue";
import { Avatar } from "@dicehub/kappa/components/avatar";
import { Button } from "@dicehub/kappa/components/button";
import { Empty } from "@dicehub/kappa/components/empty";
</script>

<template>
  <Empty.Root size="sm">
    <Empty.Header>
      <Empty.Media aria-hidden="true">
        <Avatar.Group>
          <Avatar.Root><Avatar.Image src="/avatars/mei-chen.webp" alt="" /><Avatar.Fallback>MC</Avatar.Fallback></Avatar.Root>
          <Avatar.Root><Avatar.Image src="/avatars/lina-haddad.webp" alt="" /><Avatar.Fallback>LH</Avatar.Fallback></Avatar.Root>
          <Avatar.Root><Avatar.Image src="/avatars/samir-aziz.webp" alt="" /><Avatar.Fallback>SA</Avatar.Fallback></Avatar.Root>
        </Avatar.Group>
      </Empty.Media>
      <Empty.Title>No review team</Empty.Title>
      <Empty.Description>Invite colleagues to review this simulation project.</Empty.Description>
    </Empty.Header>
    <Empty.Content>
      <Button size="sm" variant="primary" :icon="Plus">Invite reviewers</Button>
    </Empty.Content>
  </Empty.Root>
</template>

With Actions

Place the primary recovery action first. Keep secondary guidance quiet.

No projects

Create a project to organize cases, runs, and results.

<Empty.Root size="sm">
  <Empty.Header>
    <Empty.Media variant="icon"><FolderOpen aria-hidden="true" /></Empty.Media>
    <Empty.Title>No projects</Empty.Title>
    <Empty.Description>Create a project to organize cases and results.</Empty.Description>
  </Empty.Header>
  <Empty.Content>
    <Button size="sm" variant="primary">Create project</Button>
    <Button size="sm" variant="ghost">Read the guide</Button>
  </Empty.Content>
</Empty.Root>

Outlined Container

Add a consumer class when the empty state must define a drop zone or bounded region. Do not add a container only to decorate an already clear layout.

Drop geometry here

STEP, STL, or OBJ up to 250 MB.

<Empty.Root class="drop-empty" size="sm">
  <Empty.Header>
    <Empty.Media variant="icon"><Upload aria-hidden="true" /></Empty.Media>
    <Empty.Title>Drop geometry here</Empty.Title>
    <Empty.Description>STEP, STL, or OBJ up to 250 MB.</Empty.Description>
  </Empty.Header>
</Empty.Root>

<style scoped>
.drop-empty {
  border: 1px dashed var(--kappa-line);
  border-radius: var(--kappa-radius-lg);
  background: var(--kappa-control);
}
</style>

Dynamic Status

Add status semantics only when an empty result appears after an asynchronous change and the update is useful without focus movement.

No matching runs

The run list changed and now contains no matches.

<Empty.Root role="status" aria-live="polite" size="sm">
  <Empty.Header>
    <Empty.Title as="h2">No matching runs</Empty.Title>
    <Empty.Description>The run list changed and now contains no matches.</Empty.Description>
  </Empty.Header>
</Empty.Root>

Right-to-left

Logical sizing and alignment follow the inherited text direction.

لا توجد مشاريع

أنشئ مشروعًا لتنظيم حالات المحاكاة والنتائج.

<Empty.Root dir="rtl" size="sm">
  <Empty.Header>
    <Empty.Title>لا توجد مشاريع</Empty.Title>
    <Empty.Description>أنشئ مشروعًا لتنظيم حالات المحاكاة والنتائج.</Empty.Description>
  </Empty.Header>
</Empty.Root>

Accessibility

  • Empty is presentational by default. It does not add role="status" or aria-live.
  • Use a title element that fits the document hierarchy. The default is h3; change it with as.
  • Mark a decorative media icon with aria-hidden="true". Give informative images useful alternative text.
  • Do not announce empty content that was already present at page load. Live regions are for meaningful dynamic changes.
  • Use clear action labels. Do not rely on an icon or color to explain the recovery path.
  • Keep keyboard focus on the control that caused a filtered empty result unless the workflow requires a deliberate move.

API Reference

Empty.Root

Renders a div and forwards native attributes and listeners.

PropTypeDefaultDescription
size"sm" | "base" | "lg""base"Controls spacing and type scale.

Empty.Media

PropTypeDefaultDescription
variant"default" | "icon""default"Uses supplied media unchanged or places an icon in a quiet container.

Empty.Title

PropTypeDefaultDescription
as"h2" | "h3" | "h4" | "p" | "div""h3"Sets the semantic title element for the surrounding document hierarchy.

Parts

PartElementDescription
Empty.RootdivCenters the complete empty-state composition and forwards native attributes.
Empty.HeaderdivGroups media, title, and description.
Empty.MediadivContains an icon, image, avatar, chart preview, or other visual.
Empty.Titleh3Names the empty state; the as prop changes its semantic element.
Empty.DescriptionpExplains why the state is empty or what the user can do next.
Empty.ContentdivGroups actions, links, inputs, or other recovery controls.

Exports

ExportDescription
EmptyCompound API exposing Root, Header, Media, Title, Description, and Content.
EmptyRootUnaugmented empty-state root component.
EmptyHeaderCopy and media grouping component.
EmptyMediaDefault or icon media container.
EmptyTitleSemantic empty-state title.
EmptyDescriptionSupporting description.
EmptyContentAction and recovery content group.
EmptySizeSupported root size union.
EmptyMediaVariantSupported media treatment union.
EmptyTitleElementSupported semantic title element union.