Element states Exercises
Explore hands-on “Element states” exercises to sharpen your skills and level up your craft. Want more? Browse all search results
Exercise
Atoms
Exercise
Common font styles
Exercise
Focused state
Exercise
Indeterminate state
Exercise
Nudge users to fill empty states
Exercise
Dragged state
Exercise
Enabled state
Exercise
Encourage users to build habits
Exercise
Toggle switch
Exercise
Inner shadow
Exercise
Activated state
Exercise
Select the accordion behavior depending on users' needs
Exercise
Multiple CTAs in empty states
Exercise
Error state
Exercise
Disabled state
Exercise
Show a preview of the selected date range
Exercise
Pressed state
Exercise
Avoid too much clutter on the dashboard
Exercise
Use keyboard focus on desktop
Exercise
On and off states
Exercise
Indicate an indeterminate state
Exercise
UI kits
Exercise
Use visual markers to indicate an active input
Exercise
Keep users from leaving
Exercise
Hover state
Exercise
Clearly explain to users why the page is empty
Exercise
Use meaningful, actionable CTAs
Exercise
Selected state
Exercise
Collapsed state
Exercise
Action empty state
Exercise
Indicate menu states
Exercise
Basic empty state
Exercise
Prevent an empty feed
Exercise
Handle 404 pages gracefully
Exercise
Leverage success states
Exercise
Show success message when it submits
Exercise
Expanded state
Exercise
Use relevant illustrations
Exercise
Leverage empty states
Exercise
Clearly indicate hover and selected row states
Exercise
Communicate interactivity with the hover state
Exercise
Indicate section state
Exercise
Switch to active state once a change is made
Exercise
Clearly demonstrate state changes
Exercise
State preservation
Exercise
Button states and feedback
Exercise
Default states
Exercise
Interactive symbol states
Exercise