Function ButtonExamples

docs/src/components/Examples/ButtonExamples.tsx:88–586

()

}

export function ButtonExamples() {
  const [isLoading, setIsLoading] = useState(false)
  const [likedButtons, setLikedButtons] = useState<Set<string>>(new Set())

  const handleLoadingDemo = () => {
    setIsLoading(true)
    setTimeout(() => setIsLoading(false), 2000)
  }

  const handleLike = (buttonId: string) => {
    setLikedButtons((prev) => {
      const newSet = new Set(prev)
      if (newSet.has(buttonId)) {
        newSet.delete(buttonId)
      } else {
        newSet.add(buttonId)
      }
      return newSet
    })
  }

  return (
    <div className="card p-8 space-y-12">
      <motion.div
        animate={{ opacity: 1, y: 0 }}
        className="text-center max-w-3xl mx-auto"
        initial={{ opacity: 0, y: 20 }}
        transition={softSpringPreset}
      >
        <h4 className="heading-3 text-text mb-4">Button System</h4>
        <p className="text-text-secondary text-lg leading-relaxed mb-6">
          A comprehensive button system showcasing our OKLCH color palette with
          semantic variants, sizes, and interactive states designed for optimal
          user experience.
        </p>
        <div className="h-1 w-24 bg-gradient-to-r from-accent to-accent/50 rounded-full mx-auto" />
      </motion.div>

      <div className="space-y-12">
        {/* Button Variants */}
        <motion.section
          animate={{ opacity: 1, y: 0 }}
          className="space-y-6"
          initial={{ opacity: 0, y: 20 }}
          transition={{ ...softSpringPreset, delay: 0.1 }}
        >
          <div className="flex items-center gap-4">
            <h5 className="heading-4 text-text">Semantic Variants</h5>
            <div className="flex-1 h-px bg-border" />
          </div>
          <p className="text-text-secondary">
            Five semantic button variants covering all common use cases in
            modern applications.
          </p>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="outline">Outline</Button>