serafim.eth

Flip Button

Install component

npxshadcn@latest add "https://21st.dev/r/serafimcloud/flip-button"
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,
}