Buttons - Satora Swaps Docs

Ground Rules

Size	Font	Height	Padding-X	Tailwind
`sm`	`12px`	`36px`	`16px`	`h-9 px-4 text-xs`
`md`	`14px`	`44px`	`20px`	`h-11 px-5 text-sm`
`lg`	`16px`	`48px`	`24px`	`h-12 px-6 text-base`

Height is fixed via h-*, no vertical padding. Icons are font x 1.15, gap is font x 0.5.

Variant	Hover effect
Lime	`hover:brightness-[0.93]` / `dark:hover:brightness-110`
Glass	`hover:bg-white/80` / `dark:hover:bg-white/[0.1]`
Outline	`hover:bg-gray-50` / `dark:hover:bg-white/5`
Ghost	`hover:bg-gray-100` / `dark:hover:bg-white/5`

active:scale-95 - the button shrinks inward on click (Phantom-style tactile press).

The press animation (scale-95) is a core brand interaction. Never remove it from any button.

2px lime ring on :focus-visible (keyboard only, never on mouse click):

focus-visible:ring-2 focus-visible:ring-lime-light
focus-visible:ring-offset-2 focus-visible:ring-offset-white
dark:focus-visible:ring-offset-black

opacity-50 cursor-not-allowed pointer-events-none active:scale-100

Used for forward actions, external links, CTAs.

<Button variant="lime" icon={<ArrowUpRight />} iconPosition="right">
  Get Started
</Button>;

Button backgrounds always use Lime Light (#c2e821) - the same color in both light and dark mode.

bg-lime-light text-black
hover:brightness-[0.93] dark:hover:brightness-110

bg-white/60 dark:bg-white/[0.06] backdrop-blur-lg
border border-gray-200/60 dark:border-white/[0.08]
hover:bg-white/80 dark:hover:bg-white/[0.1]

bg-transparent border border-gray-200 dark:border-white/10
hover:bg-gray-50 dark:hover:bg-white/5

bg-transparent hover:bg-gray-100 dark:hover:bg-white/5