--- title: Button description: Weight tells people which action matters most. The Button in Appetite UI for Figma: 4 styles, 3 sizes, every state and the tokens each one reads. group: Components source: https://www.appetiteui.com/docs/button --- # 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. Specimen: Type Brand, Style Filled, Size lg. 56 px, radius full. ## Type and style Two axes, not one. Type carries the meaning, style carries the weight. Twelve combinations, all from the same geometry. Specimen: Type Brand, Neutral, Error by Style Filled, Outline, Weak, Link. Size md. ## 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. Specimen: Size. 36 / 44 / 56 px. ## State Four states ship with every combination. Hover the buttons to see the pressed fill. Specimen: State. Brand, Filled, md, in Default / Pressed / Loading / Disabled. ## Icon only Set Icon Only to True and the label wrapper is dropped. The button becomes a circle at the same height. Specimen: Icon Only, True. 36 / 44 / 56 px. ## Properties The Figma component properties, named exactly as the right hand panel names them. | Property | Type | Default | | --- | --- | --- | | `Type` | Brand \| Neutral \| Error | Brand | | `Style` | Filled \| Outline \| Weak \| Link | Filled | | `Size` | sm \| md \| lg | lg | | `State` | Default \| Pressed \| Loading \| Disabled | Default | | `Icon Only` | True \| False | False | | `Icon Left` | Boolean | true | | `Icon Right` | Boolean | true | | `Icon Left Swap` | Instance swap | circle | | `Icon Right Swap` | Instance swap | circle | | `Text` | Text | Button | 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. | Token | Light | Dark | Applied to | | --- | --- | --- | --- | | `brand/base` | #155DFC | #2B7FFF | Filled fill, Outline and Link label | | `static/static-white-0` | #FFFFFF | #FFFFFF | Label on filled | | `bg/white-0` | #FFFFFF | #0E0E0F | Outline fill | | `brand/alpha-10` | #2B7FFF at 10% | #2B7FFF at 10% | Weak fill | | `bg/strong-950` | #0E0E0F | #FFFFFF | Neutral filled fill | | `state/error/base-500` | #FB2C36 | #FB2C36 | Error filled fill | | `bg/soft-100` | #E9E9EA | #48484A | Disabled fill | | `text/disabled-400` | #AEAEB2 | #8E8E93 | Disabled label | | `brand/dark` | #193CB8 | #82BFFF | Pressed fill | | `dimensions/radius/full` | 9999 | 9999 | Corner radius, every size | One of these does 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. `brand/dark` is a semantic alias, not a raw primitive, so the pressed fill moves with the brand: a step darker than brand/base in light and a step lighter in dark. ## Guidelines - Do: One filled button per screen. Pair it with a link so the destination of the eye is never in doubt. - Avoid: 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. Specimen: Variant Brand, Neutral, Success, Warning, Error. 56 x 78, circle 56 at radius 24, icon 22, label 12/16. Specimen: State Default, Pressed, Disabled, on Variant Brand. brand/lighter, brand/light, bg/weak-50. 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. ## 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. Specimen: Company Google, Facebook, Apple, X at Style Filled. 245 x 56, radius full, padding 0 and 16, gap 8, label 16/24 Semi Bold. Specimen: Style Filled, Outline, Weak, Link at Company Google. bg/strong-950, bg/white-0 with a 1px border, bg/weak-50, no fill. 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. ## 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. Specimen: Style Outline, Transparent, White at State Default. 32 square, radius full, icon 20 at stroke 2.5. Specimen: State Default, Pressed, Focused, Disabled, on Style Outline. bg/white-0, bg/soft-100, bg/white-0 under brand/base, bg/weak-50. The Style axis mostly exists in Default. Pressed paints all three bg/soft-100, Focused keeps each style's own fill under a 2px brand/base stroke and the focus ring, and Disabled paints Outline and White bg/weak-50 while Transparent stays clear, so the three Pressed variants are drawn identically, and so are Outline and White in Focused and in Disabled. 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. Specimen: State Close. 56 square, radius full, brand/base, plus at 24. Specimen: State Open. four actions, 16 from the button, 12 apart, label 16 from its circle. 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.