From 4e4f174cdba67d35dfe05fb57173747ff697e2aa Mon Sep 17 00:00:00 2001
From: mateo-berri <277851410+mateo-berri@users.noreply.github.com>
Date: Fri, 25 Sep 2026 20:53:15 -0700
Subject: [PATCH] fix(ui): render the load image placeholder with the shared
 Button

---
 .../src/components/chat_ui/MarkdownImage.tsx         | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.tsx b/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.tsx
index fdc22535995..f44e5a093e0 100644
--- a/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.tsx
+++ b/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.tsx
@@ -1,6 +1,8 @@
 import { ImageIcon } from "lucide-react";
 import React, { useState } from "react";
 
+import { Button } from "@/components/ui/button";
+
 type MarkdownImageProps = Pick<React.ComponentPropsWithoutRef<"img">, "src" | "alt" | "title">;
 
 type ImageSource = { readonly label: string; readonly tooltip: string | undefined };
@@ -27,19 +29,21 @@ export function MarkdownImage({ src, alt, title }: MarkdownImageProps) {
 
   const source = describeImageSource(src);
   return (
-    <button
+    <Button
       type="button"
+      variant="outline"
+      size="sm"
       onClick={(event) => {
         event.preventDefault();
         setLoaded(true);
       }}
       title={source.tooltip}
-      className="inline-flex max-w-full items-center gap-2 rounded-md border border-border bg-muted px-3 py-1.5 text-sm text-foreground hover:bg-accent"
+      className="max-w-full font-normal"
     >
-      <ImageIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+      <ImageIcon className="text-muted-foreground" aria-hidden="true" />
       <span className="truncate">{alt || "Image"}</span>{" "}
       <span className="truncate text-muted-foreground">{source.label}</span>{" "}
       <span className="shrink-0 font-medium">Load image</span>
-    </button>
+    </Button>
   );
 }