diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx
index 859aa10d0cf68..1f2c6b3b3416b 100644
--- a/site/src/components/Button/Button.tsx
+++ b/site/src/components/Button/Button.tsx
@@ -7,6 +7,8 @@ import { type VariantProps, cva } from "class-variance-authority";
import { forwardRef } from "react";
import { cn } from "utils/cn";
+// Be careful when changing the child styles from the button such as images
+// because they can override the styles from other components like Avatar.
const buttonVariants = cva(
`
inline-flex items-center justify-center gap-1 whitespace-nowrap font-sans
@@ -15,8 +17,8 @@ const buttonVariants = cva(
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
disabled:pointer-events-none disabled:text-content-disabled
[&:is(a):not([href])]:pointer-events-none [&:is(a):not([href])]:text-content-disabled
- [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:p-0.5
- [&_img]:pointer-events-none [&_img]:shrink-0 [&_img]:p-0.5
+ [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:p-0.5
+ [&>img]:pointer-events-none [&>img]:shrink-0 [&>img]:p-0.5
`,
{
variants: {
@@ -42,11 +44,11 @@ const buttonVariants = cva(
},
size: {
- lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg",
- sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm [&_img]:size-icon-sm",
+ lg: "min-w-20 h-10 px-3 py-2 [&>svg]:size-icon-lg [&>img]:size-icon-lg",
+ sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&>svg]:size-icon-sm [&>img]:size-icon-sm",
xs: "min-w-8 py-1 px-2 text-2xs rounded-md",
- icon: "size-8 px-1.5 [&_svg]:size-icon-sm [&_img]:size-icon-sm",
- "icon-lg": "size-10 px-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg",
+ icon: "size-8 px-1.5 [&>svg]:size-icon-sm [&>img]:size-icon-sm",
+ "icon-lg": "size-10 px-2 [&>svg]:size-icon-lg [&>img]:size-icon-lg",
},
},
defaultVariants: {
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy