OverviewRow
The rows of an overview of one subject - a label, its state or value, and the one action that belongs to it.
Overview and Overview 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. For read-only pairs without actions,
use a DescriptionList; for many items with the same
columns, a Table.
Account
// 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
smwidth: label and description on top, value and action below; fromsmon, one line with the content to the right.Optional parts: a
descriptionunder the label, a row without a value that only carries an action, a row without an action.
Usage#
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-or borders of its own: the list draws the lines.y
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
Props
- Type
ReactNode
Only Overview elements (conditional rendering is allowed).
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
OverviewRow
Props
- Type
ReactNode
The translated label, on the left. The caller supplies the text; this component does not translate.
- Type
ReactNode
The one action that belongs to this state (small outline button, link-as-button, Guarded with a reason). Sits to the right of the value and stacks below it under sm.
- Type
ReactNode
The state or value, on the right: text, a Status, a formatted time, a custom composition. Empty (null/undefined) is allowed for a row that only carries an action (a jump point "View").
- Type
ReactNode
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.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Types
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 Form containing one Overview and one Overview per concept. No card per row, no subheadings, no dashboard tiles for ordinary properties.
Ownership of the line. Overview draws the dividers with divide- (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-, so the list sits against the content edge of its section. A consumer writes neither divide- nor border-.
What this component is not. Not a Description: 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.
The props of Overview, each described in its prop list on this page.
interface OverviewRowsProps extends React.ComponentProps<'div'> {
children: React.ReactNode;
}The props of Overview, each described in its prop list on this page.
interface OverviewRowProps extends Omit<
React.ComponentProps<'div'>,
'children'
> {
label: React.ReactNode;
description?: React.ReactNode;
children?: React.ReactNode;
action?: React.ReactNode;
}