SplitButton

splitbutton-1779378412538.tsx

'use client'
import { useState, useRef, useEffect } from 'react'

interface Action {
  label: string
  icon?: string
  destructive?: boolean
}

const actions: Action[] = [
  { label: 'Save draft', icon: '💾' },
  { label: 'Save & publish', icon: '🚀' },
  { label: 'Schedule...', icon: '📅' },
  { label: 'Delete', icon: '🗑', destructive: true },
]

export default function SplitButton() {
  const [open, setOpen] = useState(false)
  const [selected, setSelected] = useState('Save')
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    function handler(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [])

  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 60, background: '#0A0A0A', minHeight: 200 }}>
      <div ref={ref} style={{ position: 'relative', display: 'inline-flex' }}>
        <button
          onClick={() => setSelected(selected)}
          style={{
            background: '#C9A84C', color: '#0A0A0A',
            border: 'none', padding: '12px 20px',
            borderRadius: '8px 0 0 8px', cursor: 'pointer',
            fontWeight: 700, fontSize: 14, borderRight: '1px solid rgba(0,0,0,0.2)',
          }}
        >{selected}</button>
        <button
          onClick={() => setOpen(o => !o)}
          style={{
            background: '#C9A84C', color: '#0A0A0A',
            border: 'none', padding: '12px 12px',
            borderRadius: '0 8px 8px 0', cursor: 'pointer',
            fontSize: 12,
          }}
        >{open ? '▲' : '▼'}</button>

        {open && (
          <div style={{
            position: 'absolute', top: '100%', right: 0, marginTop: 6,
            background: '#1a1a1a', border: '1px solid rgba(255,255,255,0.1)',
            borderRadius: 8, overflow: 'hidden', minWidth: 180, zIndex: 100,
            boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
          }}>
            {actions.map(a => (
              <button key={a.label}
                onClick={() => { setSelected(a.label); setOpen(false) }}
                style={{
                  display: 'block', width: '100%', textAlign: 'left',
                  background: 'transparent', border: 'none',
                  padding: '11px 16px', cursor: 'pointer',
                  color: a.destructive ? '#ef4444' : '#F5F5F0', fontSize: 14,
                  borderBottom: '1px solid rgba(255,255,255,0.05)',
                  transition: 'background 0.15s',
                }}
                onMouseEnter={e => (e.currentTarget.style.background = 'rgba(255,255,255,0.05)')}
                onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
              >
                {a.icon} {a.label}
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}

Component info

CategoryButtons

Frameworkreact

TierFREE

Copies0

About

Split button with main action and dropdown arrow for secondary actions

More from 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

'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 { useState } from 'react';

interface GlowButtonProps {
  children: React.ReactNode;
}

const GlowButton: React.FC<GlowButtonProps> = ({ children }) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseE

GlowButton

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