PriceSummary

Playground

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

Price Summary

Preço cheio ~~R$ 59,80/mês~~. Com o cupom LANCAMENTO, R$ 39,80/mês.

Cupom LANCAMENTO aplicado

kind

coupon

className

string

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

Coupon	Price Summary
Applied	Quanto custa Hoje R$ 0 A partir de 25/out R$ 39,80/mês Preço cheio ~~R$ 59,80/mês~~. Com o cupom LANCAMENTO, R$ 39,80/mês. Cupom LANCAMENTO aplicado
None	Quanto custa Hoje R$ 0 A partir de 25/out R$ 59,80/mês Cobrado todo dia 25, no cartão ou no Pix Automático. Cancele antes do fim do teste e não paga nada.

Coupon	Price Summary
None	Quanto muda Hoje R$ 0 Depois dos 7 dias grátis + R$ 29,90/mês Sua fatura do dia 25 passa de R$ 39,80 pra R$ 69,70. Se a Marlene conectar até 18/12, a primeira cobrança dela é em 25/12. Se ela não aceitar, nada muda. No cartão Visa final 4242, o mesmo da sua conta. O cupom LANCAMENTO continua só pra Lia e Helena.

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

PriceSummaryRootProps

Prop	Tipo	Padrão	Descrição
kind?	PriceSummaryKind	"activation"	Figma "Kind" (Activation / Change).
title	ReactNode	—	The block title ("Quanto custa" / "Quanto muda").
className?	string	—
children?	ReactNode	—

PriceSummaryRowProps

Prop	Tipo	Padrão	Descrição
label	ReactNode	—	Left side ("Hoje", "A partir de 25/out").
amount	ReactNode	—	Right side, always text with the period ("R$ 39,80/mês").
emphasis?	boolean	false	Figma "Today amount": Label/Large Semibold instead of Label/Small Semibold.
className?	string	—

PriceSummaryCouponProps

Prop	Tipo	Padrão	Descrição
badge?	ReactNode	—	The applied coupon chip (Badge tone="info" icon={<Tag />}), if any.
action?	ReactNode	—	"Remover" or "Tenho um cupom" (a ghost 44 Button).
className?	string	—