Components
Loading preview...
Here is Button component
npx shadcn@latest add https://21st.dev/r/float_ui/button-1import React from "react";
type ButtonSize = "sm" | "default" | "md" | "lg" | "xl";
interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
size?: ButtonSize;
icon?: React.ReactNode;
}
const sizeClasses: Record<ButtonSize, { button: string; icon: string }> = {
sm: { button: "px-3 py-1.5 text-sm", icon: "w-4 h-4" },
default: { button: "px-4 py-2", icon: "w-5 h-5" },
md: { button: "px-5 py-3", icon: "w-6 h-6" },
lg: { button: "px-6 py-3.5", icon: "w-6 h-6" },
xl: { button: "px-7 py-4", icon: "w-6 h-6" },
};
function IconButton({
size = "default",
icon,
children,
className = "",
...props
}: IconButtonProps) {
return (
<button
className={`flex items-center gap-2 ${sizeClasses[size].button} text-indigo-600 bg-indigo-50 rounded-lg duration-150 hover:bg-indigo-100 active:bg-indigo-200 ${className}`}
{...props}
>
{icon && <span className={sizeClasses[size].icon}>{icon}</span>}
{children}
</button>
);
}
// Example usage + export
export default function Demo() {
const BookmarkIcon = (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-full h-full"
>
<path
fillRule="evenodd"
d="M6.32 2.577a49.255 49.255 0 0111.36 0c1.497.174
2.57 1.46 2.57 2.93V21a.75.75 0 01-1.085.67L12
18.089l-7.165 3.583A.75.75 0 013.75
21V5.507c0-1.47 1.073-2.756
2.57-2.93z"
clipRule="evenodd"
/>
</svg>
);
return (
<div className="flex flex-col gap-3">
<IconButton size="sm" icon={BookmarkIcon}>Small</IconButton>
<IconButton icon={BookmarkIcon}>Default</IconButton>
<IconButton size="md" icon={BookmarkIcon}>Medium</IconButton>
<IconButton size="lg" icon={BookmarkIcon}>Large</IconButton>
<IconButton size="xl" icon={BookmarkIcon}>Extra Large</IconButton>
</div>
);
}