InvoiceRow

A row of the Faturas list (Figma "Invoice Row" 2058:60906): date, what it covers, amount, a status chip (icon + word) and the action that fits.

Wraps below 320 instead of squeezing the text. Put rows in a <ul>.

<InvoiceRow status="pending" statusLabel="Pendente" date="25/11/2026" description="Lia e Helena · cartão final 4242" amount="R$ 39,80" action={<Button variant="outline" size="44" aria-label="Pagar a fatura de 25/11/2026">Pagar</Button>} />

Playground

Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.

Invoice Row

25/11/2026

Lia e Helena · cartão final 4242

R$ 39,80

Paga

status

className

string

Variantes, tamanhos e estados

Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).

Status · Paid

Invoice Row
25/11/2026 Lia e Helena · cartão final 4242 R$ 39,80 Paga

Status · Pending

Invoice Row
25/11/2026 Lia e Helena · cartão final 4242 R$ 39,80 Pendente

Status · Upcoming

Invoice Row
25/12/2026 Lia e Helena · cartão final 4242 R$ 69,70 Prevista

Props

As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.

Prop	Tipo	Padrão	Descrição
status?	InvoiceStatus	"paid"	Figma "Status". Pending is attention (yellow), never red.
statusLabel	string	—	The word on the status chip ("Paga", "Pendente", "Prevista").
date	string	—	Invoice date ("25/11/2026").
description	string	—	Figma `description`: who and how ("Lia e Helena · cartão final 4242").
amount	string	—	Amount as text ("R$ 39,80").
action?	ReactNode	—	The one action that fits: a 44 px Button ("Recibo" ghost, "Pagar" outline) whose aria-label names the invoice ("Recibo de 25/11/2026"). Upcoming has none.
showDivider?	boolean	true	Figma `showDivider`: off for the last row.
className?	string	—