Figma button group components

Look above almost any dashboard chart and you will find one: 7 days, 30 days, 12 months, three joined segments with one of them filled in. That is a button group, and it does a job that neither a lone button nor a tab bar does well. Because the segments share borders instead of sitting apart with gaps, they read as one control with several positions. The 2 button group components and 64 variants above cover both halves of the pattern, the individual segment and the assembled group.

A button group is not a row of buttons

Spacing gives the difference away. Buttons separated by gaps are independent actions, and each one is its own commitment: Cancel and Save have nothing to do with each other beyond sitting near each other. A button group welds its segments edge to edge, which tells people the options are alternatives and that one of them is already true right now.

The base segment component carries that meaning in a property of its own, Current, kept separate from State. A segment can be current and hovered, current and focused, or current and disabled without anyone drawing a new variant by hand, which is the sort of thing that only becomes obvious when a kit lacks it and your button styles start drifting apart.

One caveat on selection styling. Nielsen Norman Group's tab guidance asks for at least two visual cues on the selected item, not just a background tint, because a single low-contrast fill is easy to miss on a bright screen. The same logic applies segment by segment here.

Two sizes, four content types

The base segment comes in sm at 36px tall and md at 40px, each with a plain label, a leading icon, a leading dot for status values, or an icon on its own. Icon-only segments square up to 40px at sm and 44px at md, which keeps a three-icon view switcher from looking like a stretched pill. Every combination exists in default, hover, focused, and disabled versions.

On top of that sits the assembled Button group component in the same two sizes with label, leading icon, and icon-only versions, so a working group is one instance rather than three segments you nudged together and hoped stayed aligned. Both light and dark versions of the whole file ship together.

Button group, tab bar, or split button

Use a button group when the choice changes a parameter of content already on screen: date range, chart granularity, list versus grid. Reach for tabs when the choice swaps the content region entirely, because tabs carry navigational meaning that a segmented control does not.

And if what you actually want is one common action with a menu of rarer ones behind an arrow, that is a split button, which Nielsen Norman Group treats with some suspicion: the arrow is a small target, and users who never notice it never find the other actions. A dropdown menu is usually the calmer answer.

Keyboard behavior worth specifying in handoff

A group of joined buttons should not eat five tab stops. The W3C toolbar pattern puts one stop on the group and moves between segments with the left and right arrow keys, which is why the focused state exists at every size in this set rather than only on the first segment. Note it on the frame during handoff. It costs a sentence and saves an argument later.

When it is time to build, the same groups exist in code. Untitled UI React button groups are open source, built with Tailwind CSS and React Aria, with arrow-key movement between segments and current-item semantics already handled.