UI states

Make your components responsive to user interaction.

The UI state of a component defines what it will look like in various scenarios, like a Next button when it's hovered over. These states can be customized to create a feeling that the flow is responding to user interaction.

Here is a helpful table that shows the different UI states that can be customized.

UI state	Description
default	No user interaction has happened.
disabled	The button is disabled (e.g., cannot continue, or a choice is disabled).
checked	User has selected this choice. Only available on select buttons and their variations.
focused	The user has tabbed or otherwise focused the button.
hover	The user's cursor is over the button. This will not be seen by mobile responders, as there is not an equivalent to hover on mobile phones.

See our CSS Reference section for an overview of the CSS properties that can be applied to various components.

See the following sections for more insight into components and how they can be used.