In this dropdown menu you can switch to different states.
The default neutral state shows your website in its regular shmegular state. If you want to edit website elements in another state, click Neutral, open the menu and pick a state.
This state means that the element is highlighted, whether by default or initiated by the user.
Example: Your website has a menu with different menu items. The menu item that’s selected is the active one.
This state happens when someone places their cursor above an element, hovering over it.
Tip: Most touch devices don’t make hovering possible, so on smaller screens your hover design might not be shown.
This state happens when someone highlights an element, using an input method such as their keyboard or screen reader (voice). Focus states are also often seen for links and input fields, like in a signup form.
It’s good practice to add a border or shadow to focus items, so people can see this visual cue and follow where they are on the website. Though it can make your design a little less clean, it does guarantee a great user experience. Sometimes you have to pick your battles ;)