Empty value

A muted dash for a missing value in a table, a description list or a detail view, with words for screen readers.

@zenoxai/ui/patterns/empty-value Markdown

Asset	Owner	Last scan
srv-db-01	Platform team	10/23/2026 02:00:14
vm-jump-01	No value	10/22/2026 02:00:09
wks-0193	Marina Santos	Never scanned

function EmptyValueDemo() {
  const assets = [
    {
      name: "srv-db-01",
      owner: "Platform team",
      lastScan: "10/23/2026 02:00:14",
    },
    { name: "vm-jump-01", owner: null, lastScan: "10/22/2026 02:00:09" },
    { name: "wks-0193", owner: "Marina Santos", lastScan: null },
  ]

  return (
    <Table className="max-w-lg" aria-label="Assets">
      <TableHeader>
        <TableRow>
          <TableHead>Asset</TableHead>
          <TableHead>Owner</TableHead>
          <TableHead>Last scan</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {assets.map((asset) => (
          <TableRow key={asset.name}>
            <TableCell className="font-mono">{asset.name}</TableCell>
            <TableCell>{asset.owner ?? <EmptyValue />}</TableCell>
            <TableCell className="tabular-nums">
              {/* The absence means something here, so it says so. */}
              {asset.lastScan ?? (
                <span className="text-text-muted">Never scanned</span>
              )}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Usage

import { EmptyValue } from "@zenoxai/ui/patterns/empty-value"

<TableCell>{asset.owner ?? <EmptyValue />}</TableCell>

Use it wherever a value can be absent: table cells, Description List items, detail views. A blank cell is ambiguous (no value, still loading, or broken), and “N/A”, “null” or “-” read as data.

When the absence itself means something, write that instead, in text-text-muted: “Never scanned”, “No owner”, “Not reported by the agent”. The “Last scan” column above does.

Pass label with the translated text for screen readers; it defaults to “No value”.

See Data display for the rest of the rules about values.

Accessibility

The dash is hidden from assistive technology; screen readers announce label instead.
The dash uses text-text-muted, which keeps 4.5:1 on the surface and the muted surface in both themes.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.

EmptyValue

EmptyValue marks a missing value in a table cell, a description list or a detail view: a muted dash on screen and `label` ("No value" by default) for screen readers. A blank cell would be ambiguous, and "N/A" or "-" read as data. When the absence itself means something, such as "Never scanned" or "No owner", write that text instead.

Prop	Type	Default
`label`	`string` Already-translated text screen readers announce instead of the dash.	`No value`