Button

You tap Place order in a food delivery app. Nothing seems to happen, so you tap again. Ten minutes later two pizzas arrive and your card was charged twice. That’s a buttonButtonA control the user taps or clicks to perform an action, like Save, Send or Buy.Open in glossary → bug, and it’s one of the most expensive bugs a team can ship.

Buttons look like the simplest thing on the screen. But every button has several states, talks to a server, and has to work with touch, mouse, keyboard and screen readers. That’s a lot of places for bugs to hide.

What is a button?

A button is a control that starts an action when you tap or click it: pay, send, save, delete, add to basket. The label tells you what will happen, and the look tells you how important the action is.

You’ll see buttons used to:

• Commit an action: Place order, Send money, Book flight.
• Move forward in a flow: Continue, Next, Sign up.
• Do something small in place: Like, Share, Add another item.
• Destroy something: Delete account, Remove card, Cancel subscription.

Anatomy

How it differs from similar components

A common finding is a button that should have been something else, or something else pretending to be a button.

Component	What happens on tap	Keeps a state?	Typical use
Button	Runs an action	No (it doesn’t stay “on”)	Pay, Save, Send, Delete
Link	Navigates to another page or screen	No	“View order details”, “Terms of service”
Toggle switch	Turns a setting on or off immediately	Yes, on/off	Notifications, Wi-Fi
Segmented control	Picks one of a few views	Yes, one selected	List / Map
Chip	Filters or adds a tag	Often	“Vegan”, “Under €20”
Menu item	Runs an action from a list	No	Overflow menu: Rename, Duplicate

Designs & variants

Buttons come in emphasis levels. The more important the action, the louder the button. Each platform has its own names for them.

iOSAndroidWeb

Dark

Pick a platform, then hover, press and Tab through the buttons. They all respond.

Place order

Save for later

Cancel

Skip for now

Delete accountRemove

SmallMediumLarge

New order

Trail running shoes

Size 42 · Ocean blue

Total

€89.90

Add to basket

CancelSave changes

Emphasis	iOS	Android (Material 3)	Web (typical)	Use it for
High	Filled (.borderedProminent)	Filled	Primary	The main action. One per screen.
Medium	Tinted / Gray (.bordered)	Filled tonal, Outlined	Secondary	Alternatives: Save for later, Cancel
Low	Plain (.borderless)	Text	Tertiary, link-style	Skip, Learn more, Forgot password?
Destructive	role: .destructive (red)	Error color (custom)	Danger	Delete, Remove, Cancel subscription
Floating	Not used	FAB, extended FAB	Rare	The screen’s main creation action

Six states, every time

A button is not one picture. It’s six. Designers often deliver only the default look, so developers invent the rest, and that’s where bugs appear. Explore them here:

🎛️ Button states explorer

Every button has six states. A tester checks all of them on every platform and in both themes.

Platform

iOSAndroidWeb

Emphasis

FilledTonalOutlinedTextDestructive

Dark

Continue

Default

Readable label, enough contrast (4.5:1 text, 3:1 shape against the background).

Continue

Hover

Web and iPad/desktop pointers only. A subtle change; never the only hint that something is clickable.

Continue

Pressed

Instant feedback on touch-down, so the user knows the tap registered.

Continue

Focused

Keyboard users must see a clear focus ring. Press Tab on the web and look for it.

Continue

Disabled

Looks inactive and really is: no tap, no click, no Enter key, no request.

ContinueLoading

Loading

Shows progress, blocks repeat taps, keeps its size, and always ends (success or error).

Now try a real one

Server response

SuccessErrorSlow (4 s)

Disabled

Tap the button several times quickly while it loads. A good button counts your taps but sends only one request.

Pay €24.90

Ready

taps: 0requests sent: 0Reset

When to use it

A button is the right choice when:

• Tapping it performs an action (saves, sends, pays, deletes) rather than just showing another page.
• The action has a clear verb you can put on the label.
• There is a clear hierarchy: one primary action, maybe a secondary one, and the rest as low-emphasis buttons.
• The action needs feedback: a loading state, a success message or an error.

Good and bad uses

Common bugs

These are the button bugs testers report again and again. Many of them cost real money.

#	Bug	What you see	Typical severity
1	Double submit	Two quick taps create two orders, two payments or two messages	Critical
2	Endless spinner	After a network error the button keeps loading forever, with no message and no retry	High
3	Disabled button still works	A greyed-out button can still be tapped, clicked or triggered with Enter	High
4	Never enabled	The button stays disabled even after the form is valid, often after autofill or paste	High
5	Label truncated	“Place ord…” or the price cut off in other languages or with large text	Medium
6	Hidden CTA	The sticky button sits under the keyboard, the home indicator or a cookie banner	High
7	No confirmation for destructive actions	“Delete account” or “Clear basket” happens instantly with no confirm or undo	High
8	Tap area too small	Only the icon reacts, not the whole visible button. Users miss it	Medium
9	No pressed or focus feedback	Nothing changes on tap, or keyboard users can’t see which button is focused	Medium
10	Layout jump on loading	The button shrinks to the spinner’s size, so the layout jumps and the next tap lands on something else	Low–Medium

Find the bug

Here’s a food delivery checkout with six bugs. Test it like a real user on a bad day:

• Tap buttons once, then tap them twice quickly.
• Turn on Server errors and try to order.
• Try buttons that look disabled.
• Change the device settings, including the developer option.
• Watch the network log and the order counter.

🐞 Bug hunt: Checkout screen

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

MenuCheckout

Your basket

Clear

• 🍕Margherita pizza€11.501
• 🥖Garlic bread€4.901
• 🍋Lemonade€7.002

Promo code

Apply

Payment

Visa •••• 4242

Subtotal€23.40

Delivery€1.50

Place order · €24.90

Device settings

Restart app

Large textServer errorsShow layout bounds (developer option)

Network logOrders in database: 0

• Requests will appear here…

1. 1

   Hint: Tap Place order twice quickly and watch the order counter.

   Double tap creates two orders

   The button shows a spinner but still accepts taps, so each tap sends POST /api/orders. The database ends up with two orders and the card would be charged twice. Expected: the button ignores taps while the request is running (and the server rejects duplicates).

   Reveal answer✓ I found this
2. 2

   Hint: Turn on Server errors, then place an order.

   Spinner never stops after a server error

   The request fails with 500, but the button keeps spinning forever and no message appears. Expected: the loading state ends, an error like "Payment failed. Please try again." is shown, and the user can retry.

   Reveal answer✓ I found this
3. 3

   Hint: Leave the promo code empty and tap Apply.

   The greyed-out Apply button still sends a request

   Apply looks disabled, but it is only styled grey. Tapping it sends code="", gets a 400 and shows a confusing "Something went wrong". Expected: a disabled button does nothing at all.

   Reveal answer✓ I found this
4. 4

   Hint: Turn on Large text and read the main button.

   Price is cut off with large text

   The label is truncated to "Place order · €…", so the user can no longer see what they will pay. Expected: the label wraps, the price moves out of the button, or the layout adapts. Key information must never be truncated.

   Reveal answer✓ I found this
5. 5

   Hint: Imagine your thumb slips onto Clear.

   Clear empties the basket with no confirmation

   One tap on the red Clear button deletes every item instantly, with no confirmation and no Undo. Expected: a confirmation dialog ("Remove all 3 items?") or an Undo snackbar.

   Reveal answer✓ I found this
6. 6

   Hint: Tap the edge of a + circle, then turn on Show layout bounds.

   The + and − buttons only react on the tiny icon

   The grey circles are 28 px, but only the 12 px icon inside is tappable (the pink outline in layout bounds shows it). Tapping the edge does nothing. Expected: the whole circle reacts, and the touch target is at least 44×44 pt.

   Reveal answer✓ I found this

How to test it

Checklist

Button test checklist

0 of 14 checked

Copy

• The label is a clear verb that matches what actually happens
• There is only one primary (filled) button per screen or dialog
• Pressed state gives instant feedback on touch-down
• Hover (web, iPad pointer) and focus states are visible; Tab reaches every button
• Disabled buttons look disabled AND do nothing on tap, click, Enter or Space
• The button becomes enabled as soon as the form is valid (also after paste and autofill)
• Loading state blocks repeat taps; double tap sends only one request
• Loading always ends: success, error message, or timeout with retry
• Destructive actions ask for confirmation or offer Undo
• Touch target is at least 44×44 pt (iOS) / 48×48 dp (Android), including icon buttons
• Label fits in every language and at the largest text size, without hiding key info
• Sticky buttons are never covered by the keyboard, home indicator or banners
• Contrast: label 4.5:1, button shape 3:1, in light mode, dark mode and high contrast
• Screen reader announces the label, the "button" role and disabled/busy state

Example test cases

Accessibility

Buttons are where many users first get stuck. Check these:

• Role and name: Screen readersScreen readerSoftware that reads the screen aloud for blind and low-vision users, like VoiceOver or TalkBack.Open in glossary → must announce the label and the word “button”. A clickable div has no role, can’t be focused with Tab, and ignores Enter and Space.
  Dev note

  On the web, use a real <button> element.
• Icon-only buttons need an accessible name.
  Dev note

  accessibilityLabel on iOS, contentDescription on Android, aria-label on the web.
• Disabled and busy states must be announced: “dimmed” on iOS, “disabled” on Android and the web. While loading, a live message (“Processing payment”) tells the user something is happening.
  Dev note

  Or aria-busy="true".
• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: at least 44×44 pt on iOS and 48×48 dp on Android. On the web, WCAG 2.2 asks for at least 24×24 CSS px (2.5.8, level AA); 44×44 CSS px (2.5.5, level AAA) is the comfortable target.
• Contrast: label text at least 4.5:1 against the button, and the button’s shape at least 3:1 against the background. Disabled buttons are exempt, but they must still be recognizable.
• Focus: on the web, every button is reachable with Tab, has a visible focus ring, and works with both Enter and Space.
• Don’t rely on color alone for destructive actions. Red plus a clear label (“Delete account”) works for color-blind users too.

Mobile vs web

iOSAndroidWeb

Dev note

Native: UIButton with UIButton.Configuration (filled, tinted, gray, plain) or SwiftUI Button with .borderedProminent, .bordered, .borderless.

• Pressed state is a quick dim/highlight, not a ripple.
• Destructive actions are red, often inside an action sheet or alert.
  Dev note

  They use role: .destructive.
• No FAB: the main action usually lives in the navigation bar or a bottom toolbar.
• Test with Dynamic Type, VoiceOver, and on small screens like iPhone SE where sticky buttons get tight.

• Material 3 buttons: filled, filled tonal, outlined, text, elevated, plus icon buttons and the FAB.
• Pressed state shows a ripple and a state layer. Disabled = 38% opacity content on a 12% container.
• Watch for the system back gesture during loading: does going back cancel the request or leave a ghost order?
• Device fragmentationFragmentationThe huge variety of device models, screen sizes and OS versions an app must support.Open in glossary → matters: test small and large screens, font scale, display size and TalkBack.
• Developer options › Show layout bounds reveals the real tap areas.

• Use <button> for actions and <a href> for navigation. Inspect the element in DevToolsDevToolsDeveloper tools built into browsers for inspecting pages, network traffic and errors.Open in glossary → to check.
• A button inside a form submits it by default, which causes surprise submits.
  Dev note

  type="submit" vs type="button" matters.
• Test hover, focus and active styles, and pressing Enter in a text field (does it submit twice?).
• Check the button on mobile browsers too: sticky bars vs the browser’s own toolbar and the on-screen keyboard.
• Use DevTools network throttling to test the loading state and double clicks.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.A user double-taps "Send €50" on a slow connection and Anna receives €100. What should the tester report?

   AA cosmetic issue with the button colorBA double-submit bug: the button accepts taps while the request is in progressCA localization bugDNothing, the user tapped twice

2. 2.Which label is best for the confirm button in a "Remove this card?" dialog?

   AOKBYesCRemove cardDSubmit

3. 3.A "Terms of service" control opens a new page. What should it be?

   AA filled primary buttonBA linkCA toggle switchDA FAB

4. 4.After a server error, the "Pay" button keeps spinning forever. Which state was not handled?

   AHoverBFocusedCThe error outcome of the loading stateDDisabled

5. 5.What is the minimum touch target for a button on Android?

   A24×24 dpB32×32 dpC44×44 dpD48×48 dp

Key takeaways

• A button does something; a link goes somewhere. Pick the right one, and use one primary button per screen.
• Every button has six states: default, hover, pressed, focused, disabled and loading. Test all of them, in light and dark mode.
• The costliest bugs are double submits, endless spinners and disabled buttons that still work. Test with slow and failing networks.
• Labels should be specific verbs that fit at every text size and in every language.
• Check touch targets (44 pt / 48 dp), confirmation for destructive actions, and screen reader announcements.