Components
Starting preview...
Flip Button with Shadcn styles and theme. Inspired by @ln-dev7
npx shadcn@latest add https://21st.dev/r/serafimcloud/flip-buttonimport { Trash2, Mail, Archive, Star } from "lucide-react"
import { FlipButton } from "@/components/ui/flip-button"
function FlipButtonDemo() {
return (
<FlipButton
primaryText="Confirm"
secondaryText="Cancel"
onAction={() => console.log("Confirmed")}
/>
)
}
function FlipButtonDestructive() {
return (
<FlipButton
variant="destructive"
primaryText="Delete"
secondaryText="Cancel"
onAction={() => console.log("Deleted")}
/>
)
}
function FlipButtonSuccess() {
return (
<FlipButton
variant="success"
primaryText="Subscribe"
secondaryText="Confirm"
onAction={() => console.log("Subscribed")}
/>
)
}
function FlipButtonWarning() {
return (
<FlipButton
variant="warning"
primaryText="Archive"
secondaryText="Sure?"
onAction={() => console.log("Archived")}
/>
)
}
function FlipButtonSmall() {
return (
<FlipButton
size="sm"
primaryText="Small"
secondaryText="Cancel"
/>
)
}
function FlipButtonLarge() {
return (
<FlipButton
size="lg"
primaryText="Large"
secondaryText="Cancel"
/>
)
}
export default {
FlipButtonDemo,
FlipButtonDestructive,
FlipButtonSuccess,
FlipButtonWarning,
FlipButtonSmall,
FlipButtonLarge,
}