---
title: Property
description: Labeled facts about one entity, grouped in the sidebar of its page.
---

```tsx
import { Property } from "@openperf/deft";
import { IconPlus } from "@tabler/icons-react";

import { Preview } from "../../src/Preview";

export default function PropertyBasic() {
  return (
    <Preview stack={true}>
      <Property.Section heading="Heading">
        <Property.Root icon={<IconPlus />}>Item 1</Property.Root>
        <Property.Root icon={<IconPlus />}>Item 2</Property.Root>
      </Property.Section>
    </Preview>
  );
}
```

- Group the facts of one entity under a `Property.Section` heading such as Properties, Project or Activity. The heading is an `h2` that names the section for screen readers.
- `Property.Root` is a static fact: an icon and one line that truncates. Color the icon only when it carries a state, such as a warning level.
- The icon slot gives any SVG the icon size, so Tabler icons and brand icons such as an integration logo line up the same way.
- Metrics of the entity, such as throughput, latency or failure rate, go in an Activity or Health section: the value first, its context muted after it.

## Fact types

```tsx
import { Property, Select } from "@openperf/deft";
import { IconPlus } from "@tabler/icons-react";

import { Preview } from "../../src/Preview";

const OPTIONS = [
  { value: "option-1", label: "Option 1" },
  { value: "option-2", label: "Option 2" },
];

export default function PropertyFactTypes() {
  return (
    <Preview stack={true}>
      <Property.Section heading="Heading">
        <Select.Root defaultValue="option-1" items={OPTIONS}>
          <Select.Trigger
            aria-label="Option"
            className="max-w-full self-start"
            media={<IconPlus />}
            variant="ghost"
          />
          <Select.Content>
            {OPTIONS.map((option) => (
              <Select.Item key={option.value} value={option.value}>
                {option.label}
              </Select.Item>
            ))}
          </Select.Content>
        </Select.Root>
        <Property.Link icon={<IconPlus />} render={<a href="#link" />}>
          Link
        </Property.Link>
        <Property.Root icon={<IconPlus />} meta="+12%">
          Value
        </Property.Root>
      </Property.Section>
    </Preview>
  );
}
```

- A fact people can change is a ghost [Select](/deft/components/select) trigger with the value's icon in `media`, so it lines up with the rows around it.
- `Property.Link` is a fact that opens something: a project, a release, an external issue. It is a ghost [Button](/deft/components/button), sized to its text; pass the link element through `render`.
- `meta` holds a short figure aligned to the right of the row, such as the change against the previous release. It never truncates, so keep it to one value; color a change for the worse as a warning.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `icon` | `ReactNode` | - | On Root and Link. |
| `meta?` | `ReactNode` | - | On Root. A short figure aligned to the right. |
| `heading` | `ReactNode` | - | On Section. Rendered as an `h2`. |
| `render?` | `ReactElement \| function` | - | On Link. The element to render, such as a router link. |

Parts: `Root`, `Link`, `Section`. `Link` takes the other [Button](/deft/components/button) props except `variant`; other props of `Root` go to the native `div`, of `Section` to the native `section`.