PriceImpact
What a change does to the monthly invoice (Figma "Price Impact" 2058:60780), before the person commits: add-person step 1, its review and cancel one person.
Muted surface (lilac stays for calm moments); the sign is in the words, the icon only repeats it.
<PriceImpact direction="increase" amount="+ R$ 29,90/mês" condition="Só depois que a Marlene aceitar e conectar." />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Price Impact
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).
Direction · Increase
| Price Impact |
|---|
+ R$ 29,90/mês Só depois que a Marlene aceitar e conectar. Os 7 primeiros dias são grátis, contando da conexão. |
Direction · Decrease
| Price Impact |
|---|
− R$ 19,90/mês A partir de 25/12, sua fatura cai de R$ 69,70 pra R$ 49,80. O mês em curso não é devolvido. |
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 |
|---|---|---|---|
| direction? | PriceImpactDirection | "increase" | Figma "Direction": Increase (tag) or Decrease (circle-minus). |
| amount | ReactNode | — | The monthly delta with its sign in the text ("+ R$ 29,90/mês"). |
| condition | ReactNode | — | What triggers it and from when. |
| className? | string | — |