Button.

The fundamental trigger. Not just a clickable rectangle, but a complex state machine dealing with asynchronous feedback, focus management, and layout stability.

import { Button } from "@/components/ui/button"

Configuration

Variant

Size

State

Automatic width transition

Intrinsic Width Calculation • AnimatePresence

Zero Layout Shift

Most buttons jump when a loader appears. I use framer-motion to animate the width of the loader container from 0 to auto, preserving the button's center of gravity.

Automatic A11y

Setting the isLoading prop automatically injects aria-busy='true' and data-loading attributes, ensuring screen readers understand the pending state.

LoginForm.tsx

<Button 
  variant="primary" 
  size="lg"
  isLoading={isSubmitting} 
>
  Sign In
</Button>