AlertDialogWithMedia() — ui Function Reference

Architecture documentation for the AlertDialogWithMedia() function in alert-dialog-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ AlertDialogWithMedia() — ui Function Reference

Dependency Diagram

graph TD
  256a2698_03f2_aa93_7c8b_6ad3f28a07e6["AlertDialogWithMedia()"]
  d0344643_7519_ec05_b167_295207d8cf8e["alert-dialog-example.tsx"]
  256a2698_03f2_aa93_7c8b_6ad3f28a07e6 -->|defined in| d0344643_7519_ec05_b167_295207d8cf8e
  style 256a2698_03f2_aa93_7c8b_6ad3f28a07e6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx lines 91–123

function AlertDialogWithMedia() {
  return (
    <Example title="With Media" className="items-center">
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="outline">Default (Media)</Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogMedia>
              <IconPlaceholder
                lucide="BluetoothIcon"
                tabler="IconBluetooth"
                hugeicons="BluetoothIcon"
                phosphor="BluetoothIcon"
                remixicon="RiBluetoothLine"
              />
            </AlertDialogMedia>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This will permanently delete your account and remove your data
              from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Example>
  )
}