Update v5.0 - Preline MCP, AI Prompts, Animated Icons and more. Visit Changelog

........ Github
Figma X (Twitter)

Tailwind CSS Button Group

Button groups are prebuilt Tailwind CSS buttons, stacked on a vertical line or placed horizontally. Often used in toolbars, like those in WYSIWYG editors.

Basic usage

Default button group

Group related buttons together so they behave like a single control set.

Sizes

Small

Use a compact group size when the controls need to fit into tighter spaces.

Medium

Use the default medium size for most segmented controls and grouped actions.

Large

Increase the group size when the buttons need more prominence or touch target area.

Responsive stack

Switch from a horizontal row to a vertical stack when space gets tighter on smaller screens.

Vertical stack

Arrange grouped buttons in a single vertical stack instead of a horizontal row.

Button toolbar

Use grouped controls to build compact editor, formatting, or action toolbars.

© 2026 Preline Labs.