Возможные состояния кнопки: нейтральное (по умолчанию), наведённое (hover), нажатое, сфокусированное, отключённое (disabled, задисейбленное, недоступное). Чекбокса: включённое, выключенное, частичное (например, если чекбокс объединяет группу дочерних чекбоксов в разных состояниях). Поля ввода: заполненное с ошибкой. Поля для объекта: принимающее (наведённое с объектом, dragover). Ссылки: посещённая.

Не рекомендуется использовать слово «активное», так как его значение неоднозначно. Говорят «активная ссылка», имея в виду, что ссылка доступна для нажатия. В то же время в ЦСС псевдокласс :active означает нажатое состояние.

Состояние элемента должно быть очевидно по его внешнему виду (см. привычка). При использовании стандартных для ОС элементов это обычно достигается автоматически. При разработке собственных элементов, дизайнеру нужно нарисовать в том числе разные их состояния.

Важно найти понятный и непротиворечивый графический язык. Сфокусированное состояние обычно передаётся рамкой, обводкой, свечением. Нажатое, в зависимости от стиля, изображением «утопленности» с помощью градиентов и теней либо просто небольшим затемнением. Отключённое — снижением контраста и насыщенности цвета. Именно сниженный контраст — первый признак отключенного элемента; недостаточно сделать кнопку просто серой, ведь весь интерфейс в целом может быть серым.

Состояния не всегда взаимоисключающие: посещённая ссылка может быть нажатой, а сфокусированная кнопка — недоступной. Значит, эти состояния должны передаваться независимыми графическими приёмами. В то же время, отключённый элемент не имеет наведённого состояния, так как наведённость как раз показывает, что элемент доступен для взаимодействия. На иллюстрации с полем загрузки фотографии — нейтральное, наведённое, нажатое, сфокусированное, отключённое, принимающее состояния, а также состояния во время загрузки, в случае ошибки, заполненное, принимающее заполненное (не показаны принимающее состояние с ошибкой, сфокусированное во время загрузки):

Помимо самих состояний, дизайнеру иногда приходится продумать переходы между ними (см. анимация). Скажем, после загрузки фотографии прогрессбар может «схлопнуться в точку», а фотография плавно проявиться в полном цвете. Частая ошибка — бездумное добавления «плавности» во все возможные переходы. Это делает интерфейс медленным, неотзывчивым (см. воспринимаемая производительность, обратная связь). Хороший тон — мгновенно менять состояния на наведённое, сфокусированное, нажатое, но плавно (в теч. 0,2⁠—0,4 с) возвращать в нейтральное.

В полях ввода бледный текст может означать как отключённость (нередактируемое содержание), так и временный текст, который исчезнет при заполнении (placeholder, подсказка, пример). Следует избегать использования бледного текста в этих разных смыслах в одном продукте, тем более в одной форме.

В борьбе за чистоту дизайнеры часто стремятся избавиться от «лишних» состояний: игнорируют сфокусированное, посещённое. Это ошибка. Очевидный фокус позволяет пользоваться интерфейсом без мыши (доступность). Очевидная посещённость ссылок помогает при поиске (информативность).

Состояние не следует путать с другими свойствами, такими как приоритет (главная и второстепенная кнопки), стиль (в разных темах оформления, «тёмном режиме»), обязательность для заполнения и т. д., которые тоже могут отличаться графически.