So. Many. States.

“States”, as in contexts or situations in which any given element might be in. Let’s take a stroll.

Imagine a button. Gosh, I love buttons. So useful. We first think of a button in its default state. It looks nice and button-like, ready to be clicked. That’s one state. In CSS, we often think of more:

• The :hover state
• The :active state
• The :focus state
• The :visited state (if it’s a link)

The type of HTML element plays a role as well. Some are easy to style (<a>), some require some extra finagling (<button>, <input type=submit>), some are just plain hard (<input type=file>).

A button might be disabled. Perhaps it’s been clicked, and disabling the button is a way to indicate this to the user. Or it’s a part of a form that can’t be used until a previous area is completed, but the disabled button is left on the page to show the user what’s coming next.

• The [disabled] / :disabled state

Variations of a button might have the same default state, and only the interactive states change. For instance, a “follow” button might have a default hover state. A “following” button could have the same normal state, but a different hover state (expressing: warning! clicking this will unfollow someone.)

Buttons are usually words, but they don’t have to be. The content of the button is like a state:

• Button is a word
• Button is an icon or symbol
• Button is purely a visual affordance
• A combination

We usually need different button states for various design reasons:

• A big button
• A very big button
• A small button
• Buttons that butt up right next to each other
• A button with a dropdown inside of it
• A button that turns into a spinner when clicked
• Buttons of different colors

If the button is a word, the length of that word matters. Designers need to plan around variable content:

• Button is a really short word
• Button is an average length word
• Button is a long word or string of words, potentially user-generated content
• Button is so long it is wider than its parent element

The purpose of a button could be like a state. It may affect how the button looks or behaves:

• Button is a submit button
• Button is a delete / cancel button
• Button is a glorified link
• Button launches nuclear missile

Where the button appears could be a state. If you move a button to another area, should the button appear differently?

• Button appears in modal window
• Button is call-to-action in hero banner
• Button appears in footer
• Button is at the end of a form
• Button is inside of navigation

Perhaps we need button states for how much contrast they need:

• Button needs to stand out
• Button needs to blend in

Context can be an important state. What situation is the button in?

• Is it alone?
• Is there another button next to it? If yes, how does that button relate?
• Is there a whole row of buttons?

Our websites are dynamic places. Perhaps your website offers accounts, or paid services, or community features. Any given page could have a different state based on those features:

• The user is logged in or logged out
• The user is an admin
• The user’s billing is current or past due
• The user has unread messages

As front end developers, we know there are a wide variety of devices out there used to access the web.

• The button on a low resolution display
• The button on a high pixel density display
• The button is on a tiny screen held up close
• The button is on a huge screen far away

Different devices have different capabilities. Sometimes those capabilities are influenced by the owners of those devices. Sometimes browsers with those capabilities fail because of network problems or other issues.

• The button when the JavaScript didn’t run
• The button when the CSS didn’t load
• The button when the icon inside the button didn’t show

The human beings using this site are likely very different, as well:

• The person seeing the button is color blind, has an astigmatism, or another visual impairment
• The person needing to activate the button can’t use a mouse
• The person needing to find the button is in a state of crisis

Perhaps different states are required for the type of page:

• A button that appears in the header of the homepage
• The same button in that same header, but on a blog post page, where the header is intentionally downplayed
• The same button in that same header, on a sales landing page

Many sites provide content in different languages, which means different language states for our button:

• The button in English
• The button in Spanish
• The button in Portuguese
• The button in a right-to-left language, like Arabic
• The button in a language with symbols, like Japanese

The context a button is in could even transcend the web itself!

• What time of day is it?
• What time zone is the user in?
• Is the restaurant open or not?
• Is it the day of the event or not? Has the event passed?
• Is the user geographically close to the laundromat?
• Did the Brewers win or lose?

So. Many. States.