SplitButton

splitbutton-1779354179099.tsx

'use client';

import { useState } from 'react';

interface SplitButtonProps {
  primaryAction: string;
  options: { label: string; action: () => void }[];
}

const SplitButton = ({ primaryAction, options }: SplitButtonProps) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleToggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="relative inline-block text-left">
      <button
        type="button"
        className="bg-zinc-950 text-gold hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-gold rounded-l-md py-2 px-4"
        onClick={handleToggle}
      >
        {primaryAction}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className={`ml-2 h-5 w-5 ${isOpen ? 'rotate-180' : ''} transition-transform`}
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fillRule="evenodd"
            d="M5.293 7.293a1 1 0 011.414 0L10 10.414l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
            clipRule="evenodd"
          />
        </svg>
      </button>
      {isOpen && (
        <div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-zinc-950 ring-1 ring-black ring-opacity-5 focus:outline-none">
          {options.map((option, index) => (
            <button
              key={index}
              type="button"
              className="block px-4 py-2 text-gold hover:bg-zinc-800 hover:text-gold"
              onClick={() => {
                option.action();
                handleToggle();
              }}
            >
              {option.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

const DemoSplitButton = () => {
  const options = [
    { label: 'Option 1', action: () => console.log('Option 1 clicked') },
    { label: 'Option 2', action: () => console.log('Option 2 clicked') },
    { label: 'Option 3', action: () => console.log('Option 3 clicked') },
  ];

  return <SplitButton primaryAction="Primary Action" options={options} />;
};

export default DemoSplitButton;

Component info

CategoryButtons

Frameworkreact

TierFREE

Copies0

About

Split button with dropdown for additional actions

More from Buttons

'use client';

import React, { useState, useEffect } from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children }) => {
  const [x, setX] = useState(0);
  const [y,

MagneticButton

Buttons

'use client';

import React, { useState } from 'react';

interface RippleButtonProps {
  children: React.ReactNode;
  variant: 'primary' | 'secondary' | 'success' | 'danger';
  className?: string;
}

const RippleButton = ({ children, variant, classNa

RippleButton

Buttons

import { motion, useMotionValue, useSpring } from 'framer-motion';
import React from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
  className?: string;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children, cl

MagneticButton

Buttons

import React from 'react';
import { motion } from 'framer-motion';

interface LiquidButtonProps {
  children: React.ReactNode;
}

const LiquidButton: React.FC<LiquidButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{

LiquidButton

Buttons