AlertDialogSmallWithMedia() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ AlertDialogSmallWithMedia() — ui Function Reference

Dependency Diagram

graph TD
  1fd45c26_c602_7bd2_0099_660e6c1ad16b["AlertDialogSmallWithMedia()"]
  f00e6683_5ad1_57ce_ba63_874d2425eaaf["alert-dialog-example.tsx"]
  1fd45c26_c602_7bd2_0099_660e6c1ad16b -->|defined in| f00e6683_5ad1_57ce_ba63_874d2425eaaf
  style 1fd45c26_c602_7bd2_0099_660e6c1ad16b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/alert-dialog-example.tsx lines 123–155

function AlertDialogSmallWithMedia() {
  return (
    <Example title="Small With Media" className="items-center">
      <AlertDialog>
        <AlertDialogTrigger
          render={<Button variant="outline">Small (Media)</Button>}
        />

        <AlertDialogContent size="sm">
          <AlertDialogHeader>
            <AlertDialogMedia>
              <IconPlaceholder
                lucide="BluetoothIcon"
                tabler="IconBluetooth"
                hugeicons="BluetoothIcon"
                phosphor="BluetoothIcon"
                remixicon="RiBluetoothLine"
              />
            </AlertDialogMedia>
            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
            <AlertDialogDescription>
              Do you want to allow the USB accessory to connect to this device?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
            <AlertDialogAction>Allow</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Example>
  )
}