Button

Preview

Brand, filled, large. The icon slots hold the component's default circle placeholder.

Type and style

Type carries the meaning and Style carries the weight. The two axes give twelve combinations on the same geometry.

How tall is a Button?

Button is 36, 44 or 56 high (sm, md, lg), and all three clear the 44 pt target once the tap area is applied. The heights are fixed so buttons line up with fields and list rows on the same screen.

Which states does Button have?

Button has five states: Default, Pressed, Focused, Loading and Disabled, on every combination of type and style. A finger does not hover, so the set has no Hover state; with a pointer, a hover moves a specimen toward its Pressed fill.

Focused is the focusRing/brand effect style, a 2 pt gap in the surface color and then a 2 pt ring in brand/base; Type Error uses focusRing/error. The ring sits on the button shape, and a Link button also takes its pressed fill under the ring.

Loading keeps the container of Default and swaps the label for a ring spinner. The spinner is a 24 box with a 20 ring of 2 pt and an arc of about 109 degrees that turns once every 1.2 seconds.

Pressed keeps each style recognizable: Outline fills with brand/alpha-10 and keeps its stroke, Weak deepens to brand/alpha-16, Link gets brand/alpha-10, and Filled steps to brand/pressed. Disabled paints Filled and Weak bg/soft-100, leaves Outline white inside a border/soft-100 line, and gives Link no fill.

The other button components on the page carry their own states, described with each one below.

The white label measures 3.76 to 1 on Brand Filled in Dark and 3.81 to 1 on Error Filled in both modes, under the 4.5 to 1 asked of text at this size. Error Filled Pressed takes state/error/dark-700, which turns light in Dark, and its label falls to 1.92 to 1 there. A real button keeps the 2 plus 2 focus ring for keyboard focus, and size sm still needs a 44 pt hit area in code.

360 variants: Type by Style by Size by State by Icon Only, no holes. Read from Button 53:4429 of the Figma file on October 2, 2026.

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.

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.

brand/pressed is a semantic alias, so the Pressed fill moves with the brand: colors/blue/700 in Light and colors/blue/500 in Dark, two steps darker than brand/base in Light and one in Dark. static/static-white-0 is white in both modes, so a label on a brand fill stays white on a dark screen.

The focus ring is the focusRing/brand and focusRing/error effect styles: two drop shadows at blur 0, spread 2 in bg/white-0 and spread 4 in brand/base or state/error/base-500.

How does Button differ on iOS and Material 3?

Appetite UI Button is one component for both platforms: a capsule at three heights with Filled, Outline, Weak and Link styles. iOS and Material 3 each have their own button sets in the file, with their own sizes and styles.

The minimum touch target is 44 pt on iOS and 48 dp on Material 3, set by platform/min-touch-target in the Platform collection. Size sm is 36 high, so give it a 44 pt hit area on iOS and 48 dp on Android in code.

When should I use a filled Button?

Use one filled Button per screen, for the action that matters most, and pair it with a link for the way out.

The same Figma page ships five more button components, documented below: Quick Action Button, Social Button at 128 variants, Compact Button, Button / Overlay and the Floating Action Button.

Quick Action Button

A circle icon with a label under it, in five semantic colors and three states, for shortcut grids and the action row on a wallet or banking screen. Use Button for the main action of a screen.

Type moves the container fill and the icon together and leaves the label on text/strong-950 in all five. Pressed steps each tint up one stop, lighter to light, and leaves the icon color alone.

Disabled flattens the axis: every color lands on bg/weak-50 with the icon in fg/disabled-400 and the label in text/disabled-400. The five colors are the only thing an instance cannot override, because icon and label are both properties.

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 recolor the brand marks.

Style changes the shell and the mark stays put. Google keeps its four colors 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.

Facebook Filled uses static/static-facebook-blue, and static/static-facebook-blue-pressed while pressed, so it holds the same value in both modes, and its label, mark and loading arc take static/static-white-0 for the same reason. Every style is 56 tall with 16 of padding, Link included.

The label defaults to Continue, so name the provider on every real instance, for example Continue with Google.

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.

Pressed paints all three styles bg/soft-100, and Disabled paints Outline and White bg/weak-50 while Transparent stays clear. Only Outline has a border, border/soft-100 at 1 pt in Default, Pressed and Disabled.

Focused keeps each style's own fill under a 1 pt brand/base stroke drawn outside the edge, then the focus ring. Transparent has no fill, so its ring follows the stroke alone.

At 32 the circle is smaller than a finger, so give it a 44 pt hit area on iOS and 48 dp on Android in code.

Button / Overlay

A circular icon button for use on top of photography. A scrim and a background blur keep the glyph legible on any image, in both modes.

The fill is bg/scrim at 42 percent, and 58 percent while pressed, over the backdropBlur/md style, a 16 background blur. The glyph is static/static-white-0 in both modes and swaps with Icon Swap.

The set has State Default and Pressed only, with no Focused, Disabled or Loading. Give a live one the 2 plus 2 focus ring in code.

Floating Action Button

One screen-level primary action, pinned above the content, with an expanded stack behind it. It is Android-native, so 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.

Both main circles sit under dropShadow/lg. A label is a 40 tall pill at radius 12 in bg/strong-950 with text/white-0, so the pill and its text invert in Dark.

The stack sits outside the component's own 56 by 56 frame, which does not clip, so an instance measures 56 and paints 201 by 332. State is the only property, so the four actions carry a placeholder circle and the words New post, Upload photo, Scan code and Message until you override each one.

The set has no Focused state, so give a live one the 2 plus 2 focus ring in code.