Skip to main content
Frontend Glossary

UI components · Fundamentals

Button

Also called: CTA, Action button, Submit button

A clickable control that performs an action, like submitting a form, saving, deleting, or opening a dialog.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Put two buttons at the bottom of the form, right-aligned: "Cancel" as a secondary button (white background, gray border) and "Save" as the primary button (dark, solid) on the far right. When I click Save, the button should switch to a loading state and be disabled to prevent double submits. Keep Save disabled until all required fields are filled in.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Button is what you need.

Use Button when

  • When the user needs to trigger something that changes data, like submit, save, or delete
  • When clicking opens a dialog, drawer, or menu instead of going to a new page
  • When an area needs a prominent main action to guide the user to the next step

Pick something else when

  • When clicking only goes to another page or an external URL

    Use insteadLink

  • When it turns a setting on or off and takes effect immediately

    Use insteadSwitch

  • When space is tight and the action is a universally known icon like close or more

    Use insteadIcon Button

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Several equally prominent primary buttons in one area, so users don't know which one to click

  2. 02

    Faking a button with a div and a click handler, so it can't be focused or used with the keyboard

  3. 03

    No loading state and no disabling after a click, so on a slow network users click again and submit twice

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A clickable container with a text label. Icons can go before or after the text, and a spinner shows next to the text while loading.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

Buttons trigger actions: submit, save, delete, open a dialog, and so on. They usually come in a few levels of emphasis: the primary button (solid fill, usually only one per area), the secondary button (white with an outline), the text button (no border, the weakest), plus the danger button for destructive actions like delete. Every button needs to handle several states: default, hover, pressed, disabled, and loading.

The difference from a Link: a button "does something," a link "goes somewhere." If clicking takes you to another page or URL, use a link. If clicking changes data or opens a popup, use a button. A button with only an icon and no text is an Icon Button, good for tight spaces and actions everyone recognizes.

Developer info
Term ID
component-button
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • button
  • [role="button"]
  • input[type="button"]
  • input[type="submit"]
  • .ant-btn
  • .el-button
  • [class*="MuiButton-root"]
  • .arco-btn
  • .t-button
  • .n-button
  • [data-slot="button"]
  • .btn
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026