Skip to main content

States

Consistently apply visual cues and design patterns to communicate a component’s interaction state.

States are visual cues and design patterns that are consistently applied to components to help the user better understand the interaction. States include default, hover, focus, and more.

Anatomy

Buttons, chips, and tabs shown in their different interaction states

Three sections showing states. Section A shows a default button state is blue, active hover is brighter, focused with a keyboard is brighter and has an extra dotted border, pressed is dark blue, and disabled is gray. The same states are shown again with a white or transparent button, with hover, keyboard focus, and pressed all having a light blue fill. Section B shows a selected chip is blue with a white checkmark. Section C shows three tabs with the first tab active. The active tab has a light gray background and blue line underneath the text.

A. Color: Value of the active and surface color that adjusts based on the component state.
B. Icon: Visual indicator communicating the selected state.
C. Active indicator line and text: Line used to indicate the selected view, with text changing to bold when active.

Component states

Component states support user interactions and guide visual design expectations. Not all components will have all of the following states.

Default

The default, enabled state for all interactive elements and components.

Default state examples are an input field with a gray border and label above it. A transparent rectangular button with blue text and border. Another button is a blue circle with a yellow and white icon and black label below it. Two chips, one white with blue text and border and the other blue with white text and checkmark.

Hover

The state when the mouse pointer is placed over the component. Not used on touch devices.

Hover state examples are the input field's gray border has changed to blue. Rectangular button is now filled with light blue. Icon button is lighter with blue label text instead of black. The white chip is now has a light blue fill while the selected chip is unchanged.

Pressed

The temporary state indicating a component is being tapped, clicked with a mouse, or triggered with a keyboard.

Pressed examples are input field's gray border has changed to blue and has text insert caret. Rectangular button is now filled with light blue, border and label are dark blue and text is bold. Icon button is darker with blue label text instead of black. The chips are both darker but otherwise unchanged.

Focus (keyboard)

The state indicating an interactive component is in-focus during keyboard or voice-activated navigation.

Keyboard focus examples have all controls appear the same as the hover state except a text insert caret is in the input field and an additional dotted border appears around all.

Focus (mouse)

The state indicating an input field has been clicked into and is currently in-focus. This isn’t used for any other components.

Mouse focus examples are an input field with blue label text, border, and text input caret.

Active

The state indicating the currently selected item out of a set, menu, or list.

Active example is a list of options in a menu. The first option has a gray background and blue line to the left of the option text.

Selected (on/off)

The state showing the user’s selection, usually from a list of options, a checkbox, or a setting.

Selected on off examples are switch button has dark blue background and a white circle on the right side. Checkbox is filled in with blue and has a white checkmark.

Disabled

The inactive state of a component, indicating the action is not available and can’t be interacted with.

Disabled examples are input field, rectangular and icon buttons, and chips have all light gray colors and text. The input field has a dotted border instead of a solid line.

Read-only

An inactive state which may show possible or past interactions, or the absence of editing rights.

Read-only example is input field has black text and label but a dotted border instead of a solid line.

Expanded

State indicating that a component is expanded, with the menu arrow pointing up.

Expanded example is menu with expandable options. The first option is expanded, shown by a chevron pointing up and two options shown below. The last option is collapsed, shown by a chevron pointing down.

Error

State that uses color and an icon with text to indicate an error and provide user guidance.

Error example is input field has red label text, border, and error text below the field. Preceding the error text is a red icon that is a circle with an exclamation mark inside.

Interactive target areas

Ensuring sufficient space around interactive areas is vital as it facilitates easier interaction, particularly for users who may struggle with precise movements. When using components with smaller visual footprints, it’s important to design with ample touch area in mind and avoid placing elements too closely together.

Touch targets

Use the minimum size of 44 x 44 dps for touch areas across all interactive components.

Mobile UI icon button with 44dp by 44dp measurements

For additional context, learn more about challenges faced by users with a limited ability to use a mouse.

Non-touch targets

  • Use the minimum size of 24 x 24 dps for touch areas across all interactive components.
  • Rounded corners detract from 24 x 24 target.
  • To learn more about accessibility minimum targets, refer to WCAG guidance.
A UI icon button with a touch target of less than 24 x 24 dps.

These materials are intended for illustrative purposes only. They are provided AS-IS and should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. Any links to third party sites are for your information only and do not constitute endorsement by or affiliation with Visa. Visa has no insight into and/or control over third party content and code and disclaims all liability for any such components.

Copyright © 2025 Visa. All rights reserved.