Guidelines
Disabled State
The default Disabled state is used for all core action-based components, such as buttons, checkboxes, and radio buttons. When an element is in this state, it appears grayed out and does not respond to user interactions. This clearly indicates that the element is currently inactive and cannot be used. This state is crucial for maintaining the integrity of user inputs and preventing actions that are not currently allowed.
Style
|
Element |
Token |
|---|---|
|
Component |
background.disabled |
|
Text |
text.disabled |
|
Icon |
text.disabled |
|
Border |
border.disabled |
Read Only
The Read Only state allows users to view information without the ability to modify it. This is particularly useful in forms or data displays where editing is restricted. Elements in this state are styled to indicate they are non-editable, but they remain visible and informative.
Style
|
Element |
|
|---|---|
|
Text |
text.static.secondary |
|
Icon |
text.disabled |
|
Border |
border.disabled |
Hidden
The Hidden state is used when certain options or elements are not available and do not need to be shown at all. This helps in keeping the UI clean and focused on available options, such as hiding time slots that are no longer available. By removing these elements from view, we reduce clutter and prevent users from attempting to interact with unavailable options.
