Figma button components

Buttons look like the easiest component in a design system and are quietly one of the hardest to get right. A production-ready button system has to cover every hierarchy level, every state, every size, and every icon configuration, consistently, across your entire product. The Figma buttons above come as 5 components with 940 variants because that's what it takes to cover real product UI without designers detaching instances and improvising.

Button hierarchy: primary, secondary, tertiary, and link

Untitled UI buttons follow the hierarchy used by virtually every modern product: a solid primary button for the main action, a bordered secondary button for alternatives, a low-emphasis tertiary button for everything else, and link buttons (in color and gray versions) for actions that should read as inline text. Every hierarchy level also comes in destructive red for irreversible actions like deleting data, and the set extends to utility buttons, close (X) buttons, social login buttons for Apple, Google, Facebook, Twitter, Figma, and Dribbble, and mobile app store badges.

One rule worth enforcing: a single primary button per view. When everything shouts, nothing does. If a screen seems to want three primary buttons, that's usually a hierarchy problem in the flow, not a button problem. For actions that belong together, like filters or segmented options, reach for button groups instead of a row of competing buttons.

Every state your buttons need

Each button includes five states: default, hover, focused, disabled, and loading. The two that get skipped most often matter more than they look. Focused states are how keyboard users see where they are, so every button here ships with a visible focus ring rather than a subtle color shift. And hover can't be your only affordance, because touchscreens don't have hover.

Disabled states deserve a second thought before you reach for them. A grayed-out button tells users something is unavailable but not why, and disabled controls are invisible to keyboard navigation. Often a better pattern is keeping the button active and surfacing a validation message on click. When you do need a disabled state, though, it's here and correctly de-emphasized without disappearing entirely.

Size matters for accessibility too. WCAG 2.5.8 requires interactive targets of at least 24×24 CSS pixels. The five button sizes here run from 32px tall at xs up to 48px at xl, so even the smallest button clears that minimum with room to spare.

Variants and swappable icons in Figma

The 940 variants are organized with Figma variants across four dimensions: hierarchy, size, state, and icon-only. Select any button on the canvas and flip between them from the right-hand properties panel.

Every standard button also carries swappable leading and trailing icon placeholders, and the icon-only versions stay perfectly square at every size. This is the same structure Figma's own interactive button tutorial teaches, already applied across the whole set for you.

Because the components are built this way, swapping a secondary button to a destructive primary mid-design is a two-click change that keeps your label and icon overrides intact.

Sizing, icons, and Auto Layout

Every button is built with Auto Layout, so buttons grow and shrink with their text, including when your copy changes language and a translation doubles the label length. Padding, icon spacing, and corner radius stay consistent across all five sizes, which run 32, 36, 40, 44, and 48px tall from xs to xl. One habit worth stealing: give icon-only buttons a tooltip and an accessible label, because an icon that's obvious to the designer is rarely obvious to everyone.

When you're ready to build, the same buttons exist in code. Untitled UI React buttons are open source, built with Tailwind CSS and React Aria, and mirror the Figma components: the same hierarchy levels, the same five sizes, and the same states, with keyboard and screen reader accessibility handled for you.