PaymentMethodCard
The current payment method in Plano e cobrança (Figma "Payment Method Card" 2060:10084): card or Pix Automático, what it is, when it charges, and "Trocar".
Attention (expired card, Pix waiting at the bank) is the yellow chip with icon + word, never red. The action wraps under the text when the card is narrow. Name the group with aria-label="Forma de pagamento".
<PaymentMethodCard aria-label="Forma de pagamento" method="card" title="Cartão Visa final 4242" meta="Vence em 08/2027." action={<Button variant="outline" size="44" aria-label="Trocar forma de pagamento">Trocar</Button>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Payment Method Card
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).
Method · Card
| Default | Attention |
|---|---|
Cartão Visa final 4242 Vence em 08/2027. No nome de Mariana Alves. | Cartão Visa final 4242 VenceuVenceu em 10/2026. Troque o cartão ou mude pra Pix Automático. |
Method · Pix Automático
| Default | Attention |
|---|---|
Pix Automático · Banco Inter Autorizado em 12/11. Todo dia 25, o valor da fatura do mês. | Pix Automático · Banco Inter Aguardando o bancoConfirme no app do seu banco. Até lá, a cobrança continua no cartão final 4242. |
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 |
|---|---|---|---|
| method? | PaymentMethod | "card" | |
| state? | PaymentMethodState | "default" | |
| title | string | — | What it is ("Cartão Visa final 4242", "Pix Automático · Banco Inter"). |
| meta | string | — | When it charges or what to do. |
| statusLabel? | string | — | Attention chip words ("Venceu", "Aguardando o banco"); State=Attention. |
| action? | ReactNode | — | The "Trocar" Outline 44 Button, aria-label "Trocar forma de pagamento". |
| className? | string | — |
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.
MemberRow
Who gets the alerts (Figma "Member Row" 2060:10196, Settings › Família): owner, accepted co-guardian, pending invite and expired invite, the badge word carrying the state.