Toggle theme

button

Additional instructions

  1. For tests 1 and 2, please also perform color contrast tests with and without the theme toggle (at the top of the page).
  2. For test 8, a switch is present to toggle loading animation.

Test 1. Default: Ensure color contrast tests are performed

Solid brand, small Solid brand, medium Solid brand, large
Solid neutral, small Solid neutral, medium Solid neutral, large
Solid inverse, small Solid inverse, medium Solid inverse, large
Solid danger, small Solid danger, medium Solid danger, large

Test 2. Clear Default: Ensure color contrast tests are performed

Clear brand, small Clear brand, medium Clear brand, large
Clear neutral, small Clear neutral, medium Clear neutral, large
Clear inverse, small Clear inverse, medium Clear inverse, large
Clear danger, small Clear danger, medium Clear danger, large

Test 3. Default with Icons

Default with icons, small scale Default with icons, medium scale Default with icons, large scale

Test 4. Icons only

Test 5. Rounded

Button Button Button

Test 6. Rounded with Icons

Button Button Button

Test 7. Rounded Icon only

Test 8. Loading: Enable via toggle loading animation switch

Toggle loading animation:


Attachments

Test 9. Widths

Auto width (default) Half width Full width Full width with icon

Test 10. Alignments

Alignment center (default) Alignment start Alignment end Alignment space-between Alignment icon-start space-between Alignment icon-end space-between

Test 10b. Right-to-Left Alignments: For localizations that read content right-to-left

Alignment center (default) Alignment start Alignment end Alignment space-between Alignment icon-start space-between Alignment icon-end space-between

Test 11. Icons within Buttons

Test 12. Setting Focus: Setting focus on buttons and input

Set Focus to Button 1 Set Focus to Button 2 Set Focus to Input
Button 1 for focus Button 2 for focus Label for input focus