TRA SummitDesign System

Separator

A thin rule that divides settlement summaries, menus, and form regions.

Horizontal

Today's settlements

14 batches · $42,310.55

Pending payouts

3 batches · $9,184.20

<p>Today's settlements</p>
<Separator className="my-4" />
<p>Pending payouts</p>

Vertical

TransactionsDisputesPayouts
<div className="flex h-6 items-center gap-4">
  <span>Transactions</span>
  <Separator orientation="vertical" />
  <span>Disputes</span>
  <Separator orientation="vertical" />
  <span>Payouts</span>
</div>

With label

Pay with saved card ending in 4421

Draft from bank account (ACH)

<Separator label="or" className="my-4" />