Components
Loading preview...
Here is Morph Button components
@iamsatish4564
npx shadcn@latest add https://21st.dev/r/iamsatish4564/morph-button'use client';
import * as React from 'react';
import { MorphButton } from '@/components/ui/morph-button';
export default function MorphButtonVariantsDemo() {
const [loadingState, setLoadingState] = React.useState<{
[key: string]: boolean;
}>({});
const handleClick = (id: string) => {
setLoadingState((prev) => ({ ...prev, [id]: true }));
setTimeout(() => {
setLoadingState((prev) => ({ ...prev, [id]: false }));
}, 2000);
};
return (
<div className="flex w-full flex-col items-center justify-center gap-8 border-l-2 border-muted bg-muted/10 p-8">
{/*
NOTE: This layout uses container queries (@sm).
For this to work in your own application, the parent element of this component
must have the Tailwind CSS class "@container".
*/}
<div className="grid w-full max-w-2xl grid-cols-1 gap-4 @sm:grid-cols-3">
<div className="flex flex-col items-center gap-2">
<span className="text-xs font-medium text-muted-foreground">
Primary
</span>
<MorphButton
text="Confirm"
variant="primary"
isLoading={loadingState['primary']}
onClick={() => handleClick('primary')}
className="w-full"
/>
</div>
<div className="flex flex-col items-center gap-2">
<span className="text-xs font-medium text-muted-foreground">
Secondary
</span>
<MorphButton
text="Cancel"
variant="secondary"
isLoading={loadingState['secondary']}
onClick={() => handleClick('secondary')}
className="w-full"
/>
</div>
<div className="flex flex-col items-center gap-2">
<span className="text-xs font-medium text-muted-foreground">
Ghost
</span>
<MorphButton
text="Skip"
variant="ghost"
isLoading={loadingState['ghost']}
onClick={() => handleClick('ghost')}
className="w-full"
/>
</div>
</div>
</div>
);
}