Flip Button

Buttons 7

About

Flip Button with Shadcn styles and theme. Inspired by @ln-dev7

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Flip Button to your project and fits it to your theme.

Code

How Flip Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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,
}