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.
Clicks: 0
Secondary Button
Outlined, lower-emphasis action.
Clicks: 0
Disabled Button
Cannot be clicked or focused via tab.
Clicks: 0
Icon Button
No visible text label, only an icon and an aria-label.
Clicks: 0
Async / Loading Button
Click it to trigger a simulated request. It disables itself and shows a spinner until the request resolves.
Clicks: 0
Toggle Button
Switches between two pressed states and exposes aria-pressed.
Clicks: 0
Need this tested professionally?
Testing interactive components on a production product? We run test automation services for interactive components and accessibility testing services that check every control has a name and a focus state. Get in touch to discuss your project.