Dialog V2

@velon-finance/ui · status: stable · organism · domain

Uma variante de dialog com a identidade da Velon. O header e a barra sancionada de gradiente da marca (navy para azul profundo, fixa nos dois temas conforme §6.2) com o título, subtítulo opcional e um ícone circular. Use em momentos ancorados na Velon: confirmar uma transferência, concluir o onboarding, aceitar termos.

Para dialogs neutros ou sem identidade da marca (configurações, confirmações genéricas), prefira o Dialog padrão.

Visão geral

Com um tom de segurança (ícone diferente)

Código

import {
  Button, DialogV2, DialogV2Content, DialogV2Footer, DialogV2Trigger,
} from '@velon-finance/ui'
import { Wallet } from 'lucide-react'
 
<DialogV2>
  <DialogV2Trigger asChild><Button>Withdraw</Button></DialogV2Trigger>
  <DialogV2Content
    icon={<Wallet />}
    title="Confirm transfer"
    subtitle="R$ 1.000,00 via Pix to your account"
  >
    <p className="text-small text-muted-foreground">…</p>
    <DialogV2Footer>
      <Button variant="outline">Cancel</Button>
      <Button>Confirm</Button>
    </DialogV2Footer>
  </DialogV2Content>
</DialogV2>

Quando usar versus Dialog

• DialogV2. Superfícies com a identidade da Velon: transferências, saques, conclusão do onboarding, aceite de termos. O header em gradiente sinaliza “a Velon está pedindo, isto é importante”.
• Dialog. neutro ou construtivo: editar um perfil, ver detalhes, preencher um formulário.
• AlertDialog. destrutivo, irreversível: excluir conta, forçar o cancelamento de uma cobrança.