Disabled State

The disabled state is a UI condition that indicates elements are inactive or non-interactive.

Introduction

In the Mews design system, disabled states are essential for guiding user interactions and ensuring clarity in our products. Disabled states visually communicate that certain elements are not available for interaction, either temporarily or permanently.

This helps to prevent user errors and streamline the user experience by clearly showing which options are currently accessible. We employ three variations of the disabled state, each serving a unique purpose in different scenarios:

 

Disabled

Disabled

Read Only

Read Only

Hidden

Hidden


 

The disabled state pattern is crucial in providing clear visual cues when actions or inputs are not available. This pattern ensures users do not interact with elements that are inactive or irrelevant in the current context. At Mews, the disabled state is applied consistently across all action-based components in our design system to maintain a coherent and intuitive user experience.