DataRow
DataRow is a layout component for displaying short pieces of information in rows, such as properties or metadata. It supports a default variant for general content and a property variant optimised for two-line property/value pairs, and can automatically switch to a two‑column layout when you provide multiple columns.
Basic usage
Use DataRow.Item to render each line of text inside a row.
<DataRow> <DataRow.Item variant="body-md-strong">Customer</DataRow.Item> <DataRow.Item variant="body-md">Acme Corp</DataRow.Item></DataRow>Property variant
The property variant is intended for exactly two rows: a label and a value. In this variant the first row uses a line height of 18px and the second row uses 20px, while other variants keep a 20px line height for all rows.
<DataRow variant="property"> <DataRow.Item variant="body-md-strong">Plan</DataRow.Item> <DataRow.Item variant="body-md">Standard</DataRow.Item></DataRow>Multiple columns
DataRow automatically switches to a two‑column layout when you render more than one DataRow.Column. Long values are truncated with an ellipsis and a 4px gap between columns to avoid overlap.
<DataRow> <DataRow.Column> <DataRow.Item variant="body-md-strong">Customer</DataRow.Item> <DataRow.Item variant="body-md"> Acme Corporation with a long name that will be truncated </DataRow.Item> </DataRow.Column> <DataRow.Column> <DataRow.Item variant="body-md-strong">Status</DataRow.Item> <DataRow.Item variant="body-md">Active</DataRow.Item> </DataRow.Column></DataRow>Clickable rows and actions
You can make a row clickable by combining clickable with href. When you also provide an icon and set hover to true, DataRow renders a trailing IconButton using the seamless mode so its default background is transparent while preserving hover and pressed states.
import { ExternalLink } from "@helpscout/ui-kit-icons-react";<DataRow clickable href="https://example.com" hover icon={ExternalLink} iconVariant="action"> <DataRow.Item variant="body-md-strong">Open details</DataRow.Item> <DataRow.Item variant="body-md">Opens in a new tab</DataRow.Item></DataRow>;