data · Normal DOM + Twenty Remote DOM

SummaryRow

One label↔value line for totals/recap rows in the panel footer.

Use at the bottom of a list to show subtotals, taxes, totals. `emphasis` picks the weight; `valueTone="danger"` paints the value alone in red for negative deltas like applied discounts.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { SummaryRow } from '@8maverik8/twenty-design';

Examples

Subtotal / Total

Subtotal

$1,200.00

Total

$1,020.00

tsx
<SummaryRow emphasis="muted" label="Subtotal" value="$1,200.00" />
<SummaryRow emphasis="strong" label="Total" value="$1,020.00" />

Discount line (danger value)

Discount

−$180.00

tsx
<SummaryRow
  emphasis="muted"
  label="Discount"
  value="−$180.00"
  valueTone="danger"
/>

Variants

emphasis

mutedSmall grey — for subtotal-style rows.

regulardefaultBase — for plain key/value rows.

strongBold + larger — final total.

valueTone

inheritdefaultValue matches the label colour.

primaryPrimary text colour.

dangerRed — for negative deltas.

Guidelines

✓

Format money before passing to `value`.The recipe is locale-agnostic by design.

Use it for every key-value pair in the panel.Field-style rows should use Field + Label instead.