> ## Documentation Index > Fetch the complete documentation index at: https://help.standards.site/llms.txt > Use this file to discover all available pages before exploring further. # States A **state** is a named condition an element can be in. Many elements in Standards respond to viewer interaction, and each of those conditions can be styled. States Button Edit 1 *** ## Basics * States are **mutually exclusive**: an element is in one state at a time * Editing a state changes how the element looks in that condition **everywhere it appears** * States can be **synced** (share styling) or **overridden** individually ### Elements with states Common elements that have states include: * **Button**: Rest, Hover, Active, Active / Hover * **Toggle button**: Rest, Hover, Active, Active / Hover * **Dropdown**: Closed, Open * **Menu**: Closed, Open * **Menu controls**: Rest, Hover * **Search**: Rest, Searching * **Search input**: Rest, Hover, Loading, Focused, Focused / Hover * **Search result**: Rest, Hover * **Input text**: Rest, Hover, Focused, Focused / Hover * **Thumbnail**: one state per result category, called **formats** rather than states The available states depend on the element and how it's configured. Some states only become available in certain setups. For example, a button's **Active** state applies when the button links to a page, and a toggle button's applies when it controls the slide currently showing. States that combine two conditions, like **Active / Hover**, let you style the overlap directly. *** ## Switching states States Switching State Select an element such as a **button**, **dropdown**, or **search**. In the contextual toolbar, select the **state** dropdown, then select available states. States that aren't currently available are greyed out, with a tooltip explaining why. Alternatively, select the state dropdown from the right settings bar. Select a state to switch the element into it on the canvas. Paired elements stay in sync, so switching a control to **Open** also opens its menu or dropdown. **Note:** If an element has fewer than two available states, no state switcher is shown. *** ## The state editor The state editor opens an overlay that shows every state of an element side by side, so you can style and compare them at once. States Editor Select the element you want to edit, such as a button or dropdown. In the right sidebar **State** settings group (or from the state switcher menu), select **Edit states**. The overlay opens with a panel for each available state. Select elements inside a panel and adjust their settings as normal. Changes apply to that state only. You can multi select to edit multiple at once by holding shift + clicking. Select **Done** (or press esc) to close the overlay and return to the canvas. ### Editor options * **Move and resize**: drag the overlay by its header to reposition it, or drag its edges and corner to resize. The panels reflow to fit the width available. * **Full screen**: the expand icon in the header fills the canvas with the editor, which helps when an element has several states. Selecting it again returns to the floating panel. * **Light / dark**: the theme icon switches the overlay between light and dark, so you can check a design in both. This affects the overlay only, not the rest of the editor, and it's remembered per element — an element you've switched opens in that mode next time, while elements you haven't follow the editor's appearance setting. **Note:** States that can't currently apply, such as a button's **Active** with no page link, are left out of the editor entirely. The state switcher still lists them, greyed out with an explanation. *** ## Overrides and resetting States Reset By default, a state inherits its styling from the element's default state. When you change a setting for a specific state, it becomes an **override** for that state only. * A blue dot appears next to states that have overrides differing from the default * To clear a state's overrides and return it to the default styling, select the blue **reset** icon in the **State** settings group title while that state is active **Tip:** Style the default state first to get the shared look right, then switch into other states to add only the differences, like a color or scale change on hover. ### What varies per state An element's own parts vary per state: a button's text and icon, a menu's logos and controls, a result row's thumbnail and details. Content you add yourself inside a [menu](/menus) or dropdown is styled once and looks the same in every state of its container, which keeps a menu's contents from silently diverging between its Closed and Open states. A menu's logo and controls are the exception worth knowing: they aren't one element styled per state but **pairs** of elements, one per state, so each is edited directly. See [Native elements](/menus#native-elements).