data-display / stable

PropertyValue

Quiet read-only property pill with tabular numerals, an optional icon, or any shared Option leading visual.

LIVE PREVIEW

Loading preview…

When to use

Computed values and facts in a record rail.
leading takes precedence over icon. Use status, priority, avatar, company, color or custom icon without making the value interactive.

Consider an alternative

Editable numbers — use PropertyNumber.
Editable choices — use PropertySelect.

Import

import { PropertyValue } from '@revido-llc/kit';

Keyboard interaction

Read-only; adds no tab stop

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


children (required)	ReactNode	—
icon	ReactNode	—
leading	OptionLeading	—	Semantic value visual (status, avatar, priority, color or custom icon); takes precedence over icon.
unit	ReactNode	—	Inline unit for a computed fact, e.g. 7 SP.

Examples

Plain facts and property icon

import { Clock } from "lucide-react";
import { Icon, PropertyValue } from "@revido-llc/kit";
export default function Example() {
  return <>
    <PropertyValue>12.5 SP</PropertyValue>
    <PropertyValue icon={<Icon as={Clock} tone="tertiary" />}>2h 30m</PropertyValue>
  </>;
}

Every value visual

import { Clock } from "lucide-react";
import { Icon, PropertyValue } from "@revido-llc/kit";
export default function Example() {
  return <>
    <PropertyValue leading={{ kind: "status", category: "in-progress" }}>In progress</PropertyValue>
    <PropertyValue leading={{ kind: "priority", level: "high" }}>High</PropertyValue>
    <PropertyValue leading={{ kind: "avatar", name: "Ana Costa" }}>Ana Costa</PropertyValue>
    <PropertyValue leading={{ kind: "avatar", name: "Revido", shape: "company" }}>Revido</PropertyValue>
    <PropertyValue leading={{ kind: "color", color: "var(--primary)" }}>Design</PropertyValue>
    <PropertyValue leading={{ kind: "icon", icon: <Icon as={Clock} tone="tertiary" /> }}>2h 30m</PropertyValue>
  </>;
}

Leading precedence

import { Clock } from "lucide-react";
import { Icon, PropertyValue } from "@revido-llc/kit";
export default function Example() {
  return <PropertyValue icon={<Icon as={Clock} />} leading={{ kind: "status", category: "done" }}>Done</PropertyValue>;
}

No value yet

import { PropertyValue } from "@revido-llc/kit";
const actual: number | null = null;
export default function Example() {
  return <PropertyValue>{actual ?? "—"}</PropertyValue>;
}

Literal anatomy

Static component anatomy; bind events in the consuming app.

import { PropertyValue } from "@revido-llc/kit";
export default function PropertyAnatomy() { return <PropertyValue>Ada</PropertyValue>; }