Button's ghost variant has inconsistent padding about themes HOT 3 CLOSED

I think you are just missing align-items: center on the parent. Ghost buttons mostly behave like plain text in layout, which is what you are seeing; changing variants between light and dark mode is unusual and not something we optimise for.

Your request does make sense in many situations, which we’ll keep tracking this under #434

from themes.

Do you have a reference design where this looks weird, or is it just something you noticed?

This is mostly by design because these are optimised to work well with one another and among links (e.g. in a site header).

Otherwise with reasonable spacing between ghost buttons, the backgrounds would overlap each other on hover, which feels weird.

from themes.

Sure! Here is a GIF.

These are buttons with variant="outline" when I change it to ghost, the whole layout is affected. While the parent div has these innocent tailwind classes "flex justify-center gap-2 p-1"

<Button variant={isDark ? "outline" : "ghost"}>
   <NavLink href={item.path as string}>{item.name}</NavLink>
</Button>

I could just solve the issue with className={isDark ? "" : "px-4 py-2"}, but IMO this is better addressed on the framework.

from themes.