Main Content

Different Component States

In designing the user interface (UI) of an app, it is common to start with the design of the populated state of the UI. As designers, we envision perfect scenarios, common flows, and predictable results. This, understandably, contains the bulk of work a designer has to face. It contains all sorts of issues that need to be addressed.

In turn, we might neglect designing for the different states of the component or the whole system that we are designing.

In general, here are the different states a component might be in:

  • Populated
  • Blank


The populated state simply means that the component has been modified to have its intended content. In the example of an Accounts page, there is at least one account created.

See the Pen Component State: Populated by Brian Dys Sahagun (@BrianSahagun) on CodePen.1820


The blank state occurs when there is no content – whether it is the initial appearance or a result of removing all previous content.

See the Pen Component State: Blank by Brian Dys Sahagun (@BrianSahagun) on CodePen.1820

Always consider the design of the other states of the components.