Figma Button
Figma Button
Preview
Figma Button
Figma Button
The Button component is a crucial UI element, representing actionable commands within your website or application. Buttons enable everyone to initiate processes, make selections, and engage with your interface through simple clicks or taps.
Button UI components include common UI states, such as Hover, Focused, Pressed, and Disabled. All buttons are highly customizable and include prototype interactions to help you create high-quality interactions and presentations.
Buttons UI Best Practices
All four button sets share one height ladder: Small 36px, Medium and Large 44px, XL 56px. Medium and Large are both 44px tall and both use 16px of horizontal padding; the label is 16px on Medium and 18px on Large, which is why Large comes out 7px wider on the same word.
Every set carries a focused state, so keyboard navigation can be shown in a prototype instead of described in a handoff note. Disabled is on all of them except ButtonSocial.
Danger is a type on Button, ButtonIcon, and ButtonText rather than a colour you apply by hand, so a destructive action stays a property change. Use ButtonSocial for sign-in rows; it carries the Google, Apple, Facebook, X, and Github marks at all four sizes.
Button Anatomy
| Set | Variants | Properties | Copy to Figma |
|---|---|---|---|
| ButtonSocial | 80 | Type Github, Apple, X (Twitter), Facebook, GoogleSize XL, Large, Medium, SmallState Focused, Pressed, Hover, Default | |
| ButtonText | 80 | Type Danger, DefaultSize XL, Large, Medium, SmallState Disabled, Focused, Pressed, Hover, DefaultUnderline True, False | |
| ButtonIcon | 80 | Type Danger, Ghost, Secondary, DefaultSize XL, Large, Medium, SmallState Disabled, Focused, Pressed, Hover, Default | |
| Button | 80 | Type Danger, Ghost, Secondary, DefaultSize XL, Large, Medium, SmallState Disabled, Focused, Pressed, Hover, Default |
Button AI Prompt
Paste this into Claude, ChatGPT, or Figma Make:
Build a Button component set in Figma. Four types (Default, Secondary, Ghost, Danger), four sizes, five states (Default, Hover, Pressed, Focused, Disabled). Inter Semi Bold 600, 12px corner radius at every size, auto layout, width hugs the label, height fixed. Sizes, as height, label size/line height, horizontal padding, icon gap: Small 36px, 14/22, 12, 4 Medium 44px, 16/24, 16, 8 Large 44px, 18/28, 16, 12 XL 56px, 20/32, 24, 12 Default: fill #1559ea, label #ffffff, 1px inner stroke #1a1a1a1f. Hover fill #3479e9. Pressed fill #61a6fa. Focused keeps #1559ea and adds a 3px #61a6fa ring. Secondary: fill #fcfcfc, 1px #e1e1e2 border, label #1a1a1a. Hover fill #e1e1e2. Ghost: fill #ffffff, 1px #1559ea border, label #1559ea. Hover takes a 2px #3479e9 border and label. Danger: fill #dc2828, label #ffffff. Hover #ff6565. Pressed #ffc9c9. Disabled is the same for every type: fill #f4f4f5, label #1a1a1a2e. Bind each colour to a variable rather than a raw hex: brand active, brand hover, brand selected, danger active, danger hover, danger selected, surface 1 and 2, fill 1 and 2, border, disabled, text dark and light. Then add ButtonIcon (square 36/44/44/56, same types and states), ButtonText (no fill or border, Default and Danger, underline on or off), and ButtonSocial (Google, Apple, Facebook, X, Github on #ffffff with a 1px #e1e1e2 border, no disabled state).
Figma Button
Button
figma buttons
figma button component
buttons figma
Interactive component
