buttontoggleintermediate

Toggle Button

A button group where one option is active at a time, styled with active/inactive states.

Preview

<div class="inline-flex bg-gray-100 rounded-lg p-1">
  <button class="px-4 py-2 bg-white text-gray-900 font-medium rounded-md shadow-sm text-sm">Monthly</button>
  <button class="px-4 py-2 text-gray-500 font-medium rounded-md text-sm hover:text-gray-700 transition-colors">Yearly</button>
</div>

Color Breakdown

Group Background

bg-gray-100

#f3f4f6

Active Background

bg-white

#ffffff

Active Text

text-gray-900

#111827

Inactive Text

text-gray-500

#6b7280

Dark Mode Variant

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

dark:bg-gray-800 dark:text-white dark:bg-gray-700

Use Cases

Pricing toggleView mode switchersFilter controls

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.

Explore Tools

Frequently Asked Questions

How do I add more than two options?▼

Simply add more button elements inside the container div with the same classes.