A fluid button with primary, secondary, tertiary, and ghost variants. Supports sizes, leading/trailing icons, icon-only mode, and animated loading state.
"use client"; import { Button } from "@/components/ui/button"; export function ButtonSizesDemo() { return ( <div className="flex items-center justify-center min-h-screen bg-background"> <div className="flex items-center gap-3"> <Button size="sm">Small</Button> <Button size="md">Medium</Button> <Button size="lg">Large</Button> </div> </div> ); } export default { ButtonSizesDemo };
Part of Fluid Functionalism — browse the full library on 21st.dev.