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 DisabledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
size?: ButtonSize;
}
const sizeClasses: Record<ButtonSize, string> = {
sm: "px-4 py-2 text-sm",
default: "px-5 py-2.5",
md: "px-6 py-3",
lg: "px-7 py-3.5",
xl: "px-8 py-4",
};
function DisabledButton({ size = "default", children, className = "", ...props }: DisabledButtonProps) {
return (
<button
disabled
className={`${sizeClasses[size]} text-white bg-indigo-300 rounded-lg cursor-not-allowed ${className}`}
{...props}
>
{children}
</button>
);
}
// Example usage + export
export default function Demo() {
return (
<div className="flex flex-col gap-3">
<DisabledButton size="sm">Small</DisabledButton>
<DisabledButton>Default</DisabledButton>
<DisabledButton size="md">Medium</DisabledButton>
<DisabledButton size="lg">Large</DisabledButton>
<DisabledButton size="xl">Extra Large</DisabledButton>
</div>
);
}