From 8d7948298bfb4468030dd07f7d1080f763c38f91 Mon Sep 17 00:00:00 2001 From: Dmytro Stanchiev Date: Wed, 15 Apr 2026 18:21:03 -0400 Subject: [PATCH] fix(button): suppress Firefox inner focus ring and padding Add [&::-moz-focus-inner]:border-0 and [&::-moz-focus-inner]:p-0 to the base buttonVariants to prevent the extra inner dotted outline and padding that Firefox renders on focused buttons. --- src/components/ui/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 90f7339..e7fbda9 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -5,7 +5,7 @@ import type * as React from "react"; import { cn } from "@/lib/utils"; const buttonVariants = cva( - "active:scale-[.95] inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium duration-100 transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + "active:scale-[.95] inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium duration-100 transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive [&::-moz-focus-inner]:border-0 [&::-moz-focus-inner]:p-0", { variants: { variant: {