Enabled
The state of an element or a component when it is fully functional and usable. This means that it is enabled and can be interacted with how it was intended to be used.
For example, consider a button. In its enabled state, the button should be fully clickable and respond appropriately to user interactions such as hover and click events. The button should also clearly indicate that it is enabled and ready for interaction, such as a change in color or the appearance of the button's borders.
Hover
The state of a component when a user hovers their cursor over it, but before they click or interact with it. This is a common state for many interactive components, such as buttons, links, and menus.
When a user hovers over a component, it can provide visual feedback to indicate that it is interactive and ready for interaction. For example, a button may change color or have a slight animation to indicate that it can be clicked. A link may underline or change color to indicate that it is clickable.
Focused
The state of a component when it has received input focus, typically by the user tabbing to the component using the keyboard. For example, when a user tabs on a form input field, the input field will become focused to indicate that it is currently selected and ready to receive user input.
The focus state can be necessary for providing feedback to the user and indicating where their current focus is on the page. It can also be helpful for users who navigate using the keyboard, as it indicates where they are currently focused.
Active
The state of a component when a user has clicked or interacted with it, and the component is currently in a state of action or in the process of performing a task. For example, when a user clicks on a button, it will transition to its "active" state to indicate that the user has interacted with it and the task is in progress.
The active state can be necessary for providing feedback to the user and indicating that their action has been registered. For example, when a user clicks on a button, the button may change color or have a slight animation to indicate that the click has been registered and the task is in progress.
Visited
The state of a link or navigation element when the user and the corresponding destination have clicked on it visited. This means that the link or navigation element is in a "visited" state, indicating to the user that they have already interacted with that particular element.
For example, consider a profile table with multiple links that lead to different details. When a user clicks on a link, the visited state is applied to indicate that they have already visited it. This is usually represented by a change in the color or style of the hyperlink to differentiate it from unvisited links.
Selected
The state of a component when it has been chosen or highlighted by the user or the system. This means that the component is currently in a state of being "selected" or "active" in some way.
For example, consider a navigation menu with multiple options. When a user clicks on one of the options, it will become "selected,” often indicated by a change in color or highlighting to indicate that it is the currently active option.
Loading
The state of a component when it is actively fetching or processing data, and the user must wait for it to complete. This means that the component is in a "loading" state, indicating to the user that an action is taking place.
For example, consider a select that requires data to be loaded from a database. While the data is being fetched, a loading animation or message may be displayed to indicate that the data are not yet ready for interaction. This loading state can also be used for components such as buttons or forms while being processed or validated.
Dragged
The state of an element being moved or dragged by the user. This means that the element is in a "dragged" state, indicating to the user that they are currently interacting with it and moving it to a new location or position.
For example, consider a user interface with a drag-and-drop feature that allows users to rearrange the order of elements by dragging them to a new position. When the user clicks and holds down the mouse button on an element and begins to move it, the element enters the dragged state. The system can provide feedback to the user during this state by displaying an outline or shadow of the dragged element.
Error
The state of a component when there is an issue or problem with the information entered by the user. This means that the component is in an "error" state and requires the user's attention to correct the issue.
For example, consider a form input field that requires a specific format, such as a valid email address. If the user enters an incorrect format, the input field will display an error message, indicating a problem with the information entered. The error message may also include a description of the problem and instructions on correcting it.
The error state is important for helping users to identify and correct issues with the information they have entered. A design system can help reduce frustration and make it easier for users to complete their tasks by providing precise and specific feedback when there is an error.
Disabled
The state of a component when it is not functional or not available for interaction. This means that the component is disabled and cannot be interacted with in the way it is intended to be used.
For example, consider a button component that is disabled. In this state, the button should not be clickable, and it should clearly indicate that it is disabled, such as a change in color or the appearance of the button's borders. This can help to communicate to the user that the button cannot currently be interacted with.
Read-only
The state of a component when it is not editable but still displays information to the user. This means the user can view the information but not modify it.
For example, consider a form input field set to "read-only.” In this state, the input field should display previously entered information, but the user should not be able to change it.
The read-only state is often used for displaying information that is important for the user to see but is not editable. For example, a user's account information or details about a product may be displayed in a read-only format.
Filtered
The state of a list or set of items when they have been narrowed down or refined according to specific criteria. This means that the list or set of items is in a "filtered" state, indicating to the user that the displayed items have been selected or sorted based on a particular filter.
For example, consider Community. A user can filter content by platforms, sentiments, profiles, content labels, or other characteristics. When the user applies one or more filters, the content list will be updated to display only the items that match those criteria. This filtered state can also be used in search results or data tables.