Smooth Button

Polished React button component with 7 style variants, 4 sizes, subtle press animations, and Tailwind CSS theming support.

Installation

npx smoothui-cli add smooth-button

Features

Seven style variants, four sizes, a candy brand treatment, and a quiet press scale. Polymorphic via asChild (Radix Slot). Focus-visible ring and a disabled state with reduced opacity.

Variants

Solid, soft, outline, ghost, and candy — each colour way sits on the same size scale.

Sizes

xs, sm, default, lg, and icon. Icon buttons keep the hit target square.

Usage

Loading, disabled, leading/trailing icons, and pill shape — the everyday compositions.

import SmoothButton from "@/components/smooth-button";

export default function Example() {
  return <SmoothButton variant="candy">Get Started</SmoothButton>;
}

Props