One key feature of components is their ability to have multiple states that look and behave differently based on user interaction or app data.

Each state has the same structure of objects, but you can hide or adjust the properties of those objects across the states. For example, a button can be gray in the default state and blue in the selected state. A card can have an image shown in the default state and hidden in the collapsed state.

We've outlined 6 tips for creating component states. Follow these guidelines and your users (not to mention your engineers) will thank you for it.

1. Be obvious

The visible difference between states should be clear, so users know when a state changes. There's several ways to do this, from using different colors, icons, materials, and dimensions across states. In the example below, the default state has an outline, no fill color, and a gray open circle icon. The selected state is very different with a filled background and a blue checkmark icon showing.

Check out Play's Tinder Swipe tutorial for an example of creating distinct states.

2. Be consistent

While the difference between states should be obvious, the similarities should also be clear. Components should be recognizable no matter what state they are in. The two states below are clearly the same card, but one is expanded.

3. Design sequential states

Consider adding intermediate states to help the user understand their progress. In the example below, the middle "Adding" state shows the user that their request is being processed. Displaying this state helps avoid prematurely showing confirmation and gives the user feedback that their request has been sent.

Another example of this is the Uber app's confirm ride, looking for ride, and ride confirmed states that occur as the app tries to find you a ride.

4. Design coexisting states

Sometimes a component's state may be impacted by several different user interactions or by several external data sources. In those cases, it's possible states may overlap. If you have two states that can coexist, consider what will display if they're both active.

In the example below, the train can be both a favorited route and delayed, so a third design needed to be created.

5. React appropriately

The visual variation between states should reflect the severity of the state change. A significant input, like deleting an account, warrants a more significant state change, like a light gray background color to a bright red color. On the other hand, a less significant input, like favoriting a song, can have a less significant state change, like filling in a heart icon.

6. Consider external states

Sometimes an app has app wide states in addition to components with states. An app wide state change, like logging into after being logged out might affect the components' states. In the example below, some of the card components' states have been changed to "saved."

Keep these tips in mind as you build out your design system with components (and their states), component variants, and styles. Our guidelines will help you make exciting, consistent, and UX friendly states that will improve your users' overall experience in your app.