FOUNDATION
Interaction States
Interaction states are visual styles that communicate to the user the status of a component or element that is interactive.
Enabled is the state that represents the default state for most components and is meant to indicate that the component is "on" and ready to use.
Disabled is a state that prevents user interaction with a component and visually indicates that no interaction is available. Disabled states set the component to 30% opacity.
The hover state is shown when a user moves their mouse over an item to provide a visual cue to the user that the item is interactive. The cursor also changes to a hand cursor to further indicate interactivity.
The active state, sometimes referred to as pressed, is the state when a component has been pressed or clicked. In many components it is an intermittent state and only shows briefly. In components like Input and Select, it is a present on screen for longer as it is when the user is actively entering values into the components.
Visually, hover and active states are handled with a systematic approach by using a semi-transparent layer over the base layer.
Focus state is a visual indicator meant to clearly show which item on screen is in focus and is important feedback to a user navigating via keyboard. Our focus states typically use a blue focus border. Often the focus border has 1px of space between the edge of the component and the focus border to ensure that the colored border is visible.
The selected state is used to indicate to the user which selectable item in the UI is currently selected. On general surfaces, like Card, an overlay layer can be added to the surface to call attention to the item. Some components, like Menu can also add a checkmark icon to indicate the item is selected. Components like Tab, use the bolder selected option and a bottom border.
Selected states can be set to either a subtle or bold emphasis.
An optional border can be put around an item that is selected to indicate that the item is selected. Unlike the focus border, there is no gap between a selected border and the component itself.
- Interaction states are important visual feedback for the users of any application or website, be sure to include them.
- There should only ever be one item in focus at time.
CONTENTS