---
id: "packages/active-ui/overview-row"
title: "OverviewRow"
description: "The rows of an overview of one subject - a label, its state or value, and the one action that belongs to it."
url: "/packages/active-ui/overview-row"
locale: "en"
revision: "499e6aa509aed125"
---

# OverviewRow

`OverviewRows` and `OverviewRow` list the properties of one subject, such as an account or a
connection: a label on the left, the state or value on the right, and at most one action beside it.
Put them in a [FormSection](/packages/active-ui/form-section). For read-only pairs without actions,
use a [DescriptionList](/packages/active-ui/description-list); for many items with the same
columns, a [Table](/packages/active-ui/table).

**Example: The overview of an account**

Client: Runs entirely in your browser. Source: `examples/ui/overview-row.tsx`.

```tsx
// apps/docs/examples/ui/overview-row.tsx
'use client';

import {useState} from 'react';

import {FormSection} from '@workspace/active-ui/components/composed/form-section';
import {
  OverviewRow,
  OverviewRows,
} from '@workspace/active-ui/components/composed/overview-row';
import {StatusBadge} from '@workspace/active-ui/components/composed/status-badge';
import {Button} from '@workspace/active-ui/components/primitives/button';

/**
 * The overview of one account: a label per row, its state or value on the
 * right, and the one action that belongs to it. Below the `sm` width each
 * row stacks.
 */
export default function OverviewRowExample() {
  const [active, setActive] = useState(true);
  return (
    <FormSection title="Account" className="w-full max-w-xl">
      <OverviewRows>
        <OverviewRow
          label="Status"
          action={
            <Button
              size="sm"
              variant="outline"
              onClick={() => setActive(!active)}
            >
              {active ? 'Deactivate' : 'Activate'}
            </Button>
          }
        >
          <StatusBadge tone={active ? 'success' : 'neutral'}>
            {active ? 'Active' : 'Inactive'}
          </StatusBadge>
        </OverviewRow>
        <OverviewRow
          label="Two-step sign-in"
          description="With an authenticator app"
        >
          On
        </OverviewRow>
        <OverviewRow label="Created">16 May 2026</OverviewRow>
        <OverviewRow
          label="Sign-in history"
          action={
            <Button size="sm" variant="outline">
              View
            </Button>
          }
        />
      </OverviewRows>
    </FormSection>
  );
}
```

## What the composition adds

- **Lines between rows**, drawn by the list in the separator colour, with the first and last row
  flush with the section.
- **A row that stacks** below the `sm` width: label and description on top, value and action below;
  from `sm` on, one line with the content to the right.
- **Optional parts**: a `description` under the label, a row without a value that only carries an
  action, a row without an action.

## Usage

```tsx
import {
  OverviewRow,
  OverviewRows,
} from '@workspace/active-ui/components/composed/overview-row';

<OverviewRows>
  <OverviewRow label="Status" action={<Button size="sm">Deactivate</Button>}>
    <StatusBadge tone="success">Active</StatusBadge>
  </OverviewRow>
  <OverviewRow label="Created">16 May 2026</OverviewRow>
</OverviewRows>;
```

## What your application provides

- The labels, values and actions, translated and formatted.
- No `divide-y` or borders of its own: the list draws the lines.

## Accessibility

The rows are `<div>`s read in order: label, description, value, action. Name an action so that it
makes sense on its own, or link it to its label.

## API

**OverviewRows**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | yes | Only {@link OverviewRow} elements (conditional rendering is allowed). |

**OverviewRow**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | yes | The translated label, on the left. The caller supplies the text; this component does not translate. |
| `action` | `ReactNode` | no | The one action that belongs to this state (small `outline` button, link-as-button, `GuardedAction` with a reason). Sits to the right of the value and stacks below it under `sm`. |
| `children` | `ReactNode` | no | The state or value, on the right: text, a `StatusBadge`, a formatted time, a custom composition. Empty (`null`/`undefined`) is allowed for a row that only carries an action (a jump point "View"). |
| `description` | `ReactNode` | no | Optional supporting line below the label ("Last 24 hours", "Automatically every 10 minutes"). Short; whoever needs more explanation puts it in the section description or in the documentation. |

**OverviewRowsProps**

```ts
interface OverviewRowsProps extends React.ComponentProps<'div'> {
  children: React.ReactNode;
}
```

The row list of an overview: label on the left, state/value and the one
action that belongs to it on the right, rows separated by a subtle line.

The overview pattern for one subject (an account, a channel, a connection,
a configuration): a `FormSection` containing one `OverviewRows` and one
`OverviewRow` per concept. No card per row, no subheadings, no dashboard
tiles for ordinary properties.

**Ownership of the line.** `OverviewRows` draws the dividers with
`divide-separator` (the token for a line between rows within the same
surface; `--border` is for the outline) and compensates the vertical space
of the first and last row with `-my-3`, so the list sits against the content
edge of its section. A consumer writes neither `divide-y` nor `border-b`.

**What this component is not.** Not a `DescriptionList`: that is for
read-only label/value pairs without an action and renders `<dl>` semantics.
As soon as a row carries a button, a switch or a status badge with an
action, it is an overview row. Not a table: a table has columns with
homogeneous rows, an overview has heterogeneous concepts.

**OverviewRowProps**

```ts
interface OverviewRowProps extends Omit<
  React.ComponentProps<'div'>,
  'children'
> {
  label: React.ReactNode;
  description?: React.ReactNode;
  children?: React.ReactNode;
  action?: React.ReactNode;
}
```