Button
Button performs an action. Its weight tells people which action on the screen matters most.
Preview
Brand, filled, large. The icon slots hold the component's default circle placeholder.
Type and style
Two axes, not one. Type carries the meaning, style carries the weight. Twelve combinations, all from the same geometry.
Size
Fixed heights so buttons line up with fields and list rows on the same screen. All three clear the 44 pt target once the tap area is applied.
State
Four states ship with every combination. Hover the buttons to see the pressed fill.
Icon only
Set Icon Only to True and the label wrapper is dropped. The button becomes a circle at the same height.
Properties
The Figma component properties, named exactly as the right hand panel names them.
288 variants with no holes: three types by four styles by three sizes by four states by icon only. That is rare here. Chip ships 30 of its 40, Progress Steps 12 of 15. State has no Hover, the right call on a touch component. The family does not share that vocabulary: Compact Button carries Focused and no Loading, Quick Action Button carries neither, and the Floating Action Button's State axis is Open and Close, which are not states at all.
Tokens
Every value the component reads, resolved through its aliases to the primitive underneath. Change one and it changes in Figma, the CSS, and all three native outputs.
Two of these do not follow the theme. static/static-white-0 is white in both modes, so a label on a brand fill stays white on a dark screen. colors/blue/600 is a raw primitive, not a semantic alias, so the pressed fill will not move when the brand does.
Guidelines
One filled button per screen. Pair it with a link so the destination of the eye is never in doubt.
Error is for destructive actions, not for the secondary choice. Two filled buttons make the safe path and the risky one equally loud.
Size is a visual scale, not a promise about the target. Give every button a 44pt hit area on iOS and 48dp on Android in code, whichever Size you pick; nothing in the file enforces it. The same Figma page ships four more button components, documented below in the order they appear there: Quick Action Button, Social Button at 128 variants, Compact Button and the Floating Action Button.
Quick Action Button
A circle icon with a label under it, for shortcut grids and the action row on a wallet or banking screen. Five semantic colours, three states. Not a substitute for Button.
Variant moves the container fill and the icon together and leaves the label alone, text/strong-950 in all five. Pressed steps each tint up one stop, lighter to light, and leaves the icon where it was. Disabled flattens the axis: every colour lands on bg/weak-50 with a fg/disabled-400 icon, so a disabled row tells you nothing about the actions. Icon and label are both properties, so the five colours are the only thing an instance cannot override.
Compact Button
An icon-only control at 32, for toolbars, image overlays and anywhere a full button would crowd the row. Three shells, four states.
The Style axis only exists in Default. Pressed paints all three bg/soft-100, Focused paints all three bg/surface-800, and Disabled paints Outline and White bg/weak-50 while Transparent stays clear, so six of the twelve variants are drawn identically. The Outline border is present in Default and gone in every other state. Thirty-two is smaller than a finger, so give it a 44pt hit area on iOS and 48dp on Android in code.
Floating Action Button
One screen-level primary action, pinned above the content, with an expanded stack behind it. Android-native. On iOS, use a toolbar action instead.
Close is one 56 circle. Open turns that circle neutral weak with an x and hangs four expanded actions above it, each a 56 brand circle with its label to the left. The stack sits outside the component's own 56 by 56 frame, which does not clip, so an instance measures 56 and paints 124 by 332. The labels are static/static-white-0, white in both modes, which is why the specimen above sits on a panel the component does not ship. State is the only property, so all four actions carry the same placeholder circle and the same word until you override each one.
Social Button
Third-party sign-in for four providers, at one fixed height, so the stack under a login form stays even whichever set you ship. Never recolour the brand marks.
Style changes the shell and never the mark. Google keeps its four colours in every style, Facebook stays on its own blue until Filled paints the mark white, and Apple and X flip between fg/white-0 and fg/strong-950. Link is still a 56 tall button with 16 of padding, not a text link. Facebook Filled is a raw #1877F2 rather than a token, the only fill in the set that does not theme. Disabled recolours all four Google vectors to fg/disabled-400, against the component's own rule. The label ships as a placeholder, so override it on every real instance.