Skip to main content

UI ELEMENTS

Buttons

Common button variants and states you'll run into on real products, from a plain primary action to a button stuck mid-request.

How to use this page

Goal: Click each button and check that its state, label, and disabled attribute behave as expected.

Challenge: The async button changes its label and disables itself while the request is in flight. Time your assertions accordingly.

Primary Button

The default call-to-action style.

Secondary Button

Outlined, lower-emphasis action.

Disabled Button

Cannot be clicked or focused via tab.

Icon Button

No visible text label, only an icon and an aria-label.

Async / Loading Button

Click it to trigger a simulated request. It disables itself and shows a spinner until the request resolves.

Toggle Button

Switches between two pressed states and exposes aria-pressed.

Need expert QA help? We offer team training, automation consulting, and end-to-end QA services.

Talk to us

Need this tested professionally?

Testing interactive components on a production product? AssertQA delivers test automation services, manual testing services, and API testing services for teams that need real-world quality.

Talk to our QA team