Buttons

This Shadcn button block supports quantity-style controls with clear minus/plus actions around a numeric field. A set of minus and plus buttons flanking a numeric input field so users can decrease or increase a value.

This Shadcn button block shows a primary "Like" button paired with a numeric counter so users see engagement at a glance. Pressing the button toggles the label between "Like" and "Liked" and increments or decrements the adjacent count chip.

A button split into two parts: the main action on the left and a small arrow on the right that opens a dropdown menu.

This Shadcn button block groups several related actions (New, Edit, Send) into a single horizontal cluster and tucks extra options into a trailing dropdown. It works well for toolbars where users need a few common actions plus a compact "more" menu.

This Shadcn button block stacks branded social actions in a compact vertical layout for quick sign-in or sharing flows. A vertical column of buttons styled for social platforms (e.g., Facebook blue, Twitter blue) with their logos.

This Shadcn button block presents social sign-in options as a minimal row of circular icon buttons. Each icon-only button represents a provider like Google, X, Facebook or GitHub and uses equal sizing so the row feels balanced.

A segmented control where each button acts like a tab; clicking one toggles it active and deselects the others.

This Shadcn button block mirrors the like pattern but for saving items. A main "Bookmark / Bookmarked" button sits next to a small count chip showing how many saves an item has, updating both state and count when clicked.

This Shadcn button block visualises progress using numbered buttons that double as navigation between steps. A horizontal row of buttons labelled with step numbers (e.g., 1, 2, 3) that indicate progress through a multi-step process.

This Shadcn button block animates between a hamburger menu icon and a close icon inside a single ghost button. Tapping the button flips which icon is visible, making it ideal for toggling a sidebar or mobile navigation.