buttonsplitintermediate

Split Button

A button split into a main action and a dropdown trigger with a divider.

Preview

<div class="inline-flex rounded-lg shadow-sm">
  <button class="px-5 py-2.5 bg-blue-600 text-white font-medium rounded-l-lg hover:bg-blue-700 transition-colors">Save</button>
  <button class="px-3 py-2.5 bg-blue-700 text-white rounded-r-lg border-l border-blue-500 hover:bg-blue-800 transition-colors">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
  </button>
</div>

Color Breakdown

Main Background

bg-blue-600

#2563eb

Toggle Background

bg-blue-700

#1d4ed8

Divider

border-blue-500

#3b82f6

Text

text-white

#ffffff

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-blue-700 dark:hover:bg-blue-600

Use Cases

Save with optionsEmail send actionsGit commit dropdowns

Browser Support

All modern browsers.

Related Recipes

Gradient Button

button - beginner

Ghost Button

button - beginner

Pill Button

button - beginner

Icon Button

button - beginner

Loading Button

button - intermediate

Outline Button

button - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Frequently Asked Questions

How do I add a dropdown menu?▼

Add a positioned div below the button group with absolute positioning and toggle its visibility with JavaScript.