States
Interactive elements can be in different states, such as active or inactive. These are visually communicated to the user using certain techniques.
On this page
Luna's states principles
Clear
States must have a clear purpose to distinguish them from one another as well as the surrounding user interface.Consistent
States should be applied consistently across elements to help with usability and create recognisable patterns.
Examples of our interaction states across our brands.
Styles
The different styles of states we have in Luna are:
Inactive/active state
An element goes from an inactive to active state when the user chooses to select it, or turn it on. It turns back to inactive when it is deselected or turned off.
Unselected components are the default, and they use our monochrome colour palette.
Selected components use brand colours to recognise the state change.
Hovered state
A hover state is used when the pointer is over an interactive element, but only if it hasn’t been clicked or dragged. It’s most often used to show that components are clickable as the pointer moves across them, or to show labels or instructions indicating what a button will do.
Hovered components have 6% opacity. The opacity is usually applied at the parent component level or inactive state.
Hovered components have a 2px stroke as a base. The stroke weight is usually applied at the parent component level or active state.
Disabled state
A disabled state shows when an action isn’t available to a user.
Disabled components have 35% opacity. The opacity is usually applied to the entire component.
Disabled states can also be communicated with color changes.
Error state
An error state usually appears when an user fails to complete an expected action.
Error states on components have a 2px stroke as a base. The stroke weight is applied at the parent component level or active state.
Error states can also be shown through color changes, using our semantic error base red.
Types of states
Explore some examples of Luna’s interactive states across a commonly used component.