Dialog V2

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

A Velon-branded dialog variant. The header is the sanctioned brand-gradient bar (navy → azul profundo, fixed in both themes per §6.2) with the title, optional subtitle, and a circular icon. Use for Velon-anchored moments: confirming a transfer, completing onboarding, accepting terms.

For neutral / non-branded dialogs (settings, generic confirmations), prefer the standard Dialog.

Overview

With a security tone (different icon)

Code

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>

When to use vs Dialog

• DialogV2. Velon-branded surfaces: transfers, withdrawals, onboarding completion, accepting terms. The gradient header signals “Velon is asking, this is meaningful”.
• Dialog. neutral or constructive: edit a profile, view details, fill a form.
• AlertDialog. destructive, irreversible: delete account, force-cancel a charge.