---
url: /foundations/interaction/states/applying-states.md
description: States show the interaction status of a component or UI element
---

# States

States show the interaction status of a component or UI element

[Overview](overview.md) · [State layers](state-layers.md) · **Applying states**

<a id="39b2fc90-01db-41b5-b6f8-47be61ed1479"></a>

## Enabled

An enabled state communicates an interactive component or element. Enabled states use the default styling for each interactive component.

![Enabled state of 4 components.](/assets/bf654a19-ly2qpw4a-1.DwA6w2aF.webp)

Enabled states for:

1. Button
2. FAB
3. Switch
4. Text field

<a id="4aff9c51-d20f-4580-a510-862d2e25e931"></a>

## Disabled

A disabled state communicates when a component or element isn’t interactive. This state is visually communicated through color changes and reduced elevation.

**Disabled states don't need to meet Material's contrast requirements.**

![Low opacity solitary button labeled disabled, indicates a disabled/inoperable state.](/assets/94a1f4aa-ly2qrzig-2.Bt7b69pA.webp)

Disabled button

Disabled states **are** inherited by action, selection, and input components:

* Buttons
* Cards
* Checkboxes
* Chips
* List items
* Radio buttons
* Switches
* Text fields

![Inoperable state of 4 components.](/assets/77c8fafa-ly2qtg0r-3.CjRcxYDF.webp)

Disabled states for:

1. Checkbox
2. Icon button
3. Radio button
4. Segmented button

Disabled states **aren't** inherited by communication, containment, navigation, and some actions components: 

* App bars
* Badges
* Dialogs
* Floating action buttons (FABs)
* Menus
* Navigation bar, drawer, and rail
* Sheets
* Tabs
* Tooltips

::: danger Don't
![Screen erroneously showing edit FAB in inoperable state, though the edit function is unavailable.](/assets/245772a7-ly2quyuj-4.sTqDAOJj.webp)

If the action represented in the FAB is unavailable, the FAB shouldn't appear
:::

### Behavior

Disabled components can’t be focused, dragged, or pressed, and they don’t change state when tapped or hovered over.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fly2vtf7p-GM3-Foundations-Interaction-States-DisabledBehavior-v01.mp4?alt=media" aria-label="A cursor moves over and clicks on an disabled/inoperable button and the button doesn’t change."></video>

A disabled button doesn’t inherit hover or other state layers

There can be any number of disabled states in a layout.

![Disabled components on a screen.](/assets/febd52de-lyml0ix7-6.D2mq6UAy.webp)

1. Disabled redo icon button
2. Disabled checklist icon button

<a id="71c347c2-dd75-485b-892e-04d2900bd844"></a>

## Hover

Hover states are initiated by the user pausing over an interactive element using a cursor.

The lower-emphasis surface overlay for hover states can be applied to the entire component, elements within a component, or as a circular shape over part of the component.

![Cursor moves toward button which reads “enabled” and when the cursor touches the button text changes to “hovered.”](/assets/28211741-ly2vwc74-7.zXZstJru.webp)

Hovered button

Hover states **are** inherited by action, selection, and input components:

* Buttons
* Cards
* Checkbox
* Chips
* Date and time pickers
* List items
* Slider
* Switch
* Text fields

![Hover state of 4 components.](/assets/fbec179b-ly2vxl8i-8.R6eai0fr.webp)

Hovered states for:

1. FAB
2. Icon button
3. Chip
4. Segmented buttons

Hover states **aren’t** inherited by communication, containment, or navigation components: 

* App bars
* Badges
* Dialogs
* Menus
* Navigation bar, drawer, and rail
* Sheets
* Tabs

::: danger Don't
![Mobile screen with the whole app bar wrongly in hover state.](/assets/9a54a8a4-ly2vymng-9.D5ecpLBH.webp)

The individual components that are actionable within the app bar inherit hover states, not the whole app bar
:::

### Behavior

Hover states are initiated by the user pausing over an interactive element using a cursor.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fly2w0utg-GM3-Foundations-Interaction-States-HoverBehavior-1-v01.mp4?alt=media" aria-label="Button’s text“Enabled”  changes to“Hovered” when cursor moves over the button."></video>

Hover states appear and disappear using a low-emphasis animated fade

Hover states can be combined with focused, activated, selected, or pressed states.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fmq7s3uq1-03%20-%20GM3-Foundations-Interaction-States-HoverBehavior-2-v02.mp4?alt=media" aria-label="Filter chip text matches state as it's unselected, hovered, and selected by a cursor."></video>

A selected filter chip in both selected and hover states

There can only be one hover state at a time in a layout.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fly2w8zl5-GM3-Foundations-Interaction-States-HoverBehavior-3-v01.mp4?alt=media" aria-label="Hover state moves from one card to another with cursor movement."></video>

Hover state can only be on one element at a time based on cursor position

<a id="bc6d6853-48ef-490e-8076-448e89e69f0f"></a>

## Focused

A focused state communicates when a user has highlighted an element using a keyboard or voice. Focus states apply to all interactive components.

The higher-emphasis surface overlay for focused states can be applied to the entire component, elements within a component, or as a circular shape over part of the component.

![A button in focused state.](/assets/f511be42-ly2wa79s-13.Ch5_Ic3L.webp)

Focused button

Focus states **are** inherited by action, selection, and input components:

* Buttons
* Cards
* Checkbox
* Chips
* Date and time pickers
* List items
* Selection controls
* Text fields

![Focus state of 4 components.](/assets/e4c3506c-ly2wb5y9-14.BaOIOKXk.webp)

Focused states for:

1. FAB
2. Icon button
3. Chip
4. Segmented buttons

Focus states **aren’t** inherited by most communication, containment, or navigation components:

* App bars
* Badges
* Banner
* Card
* Dialogs
* Navigation bar, drawer, and rail
* Sheets

::: danger Don't
![Mobile screen showing entire app bar in focus state, which is an error.](/assets/f15dc0fa-ly2wctgk-15.CPG_O9Nh.webp)

The individual components that are actionable within the app bar inherit focus states, not the whole app bar
:::

### Keyboard focus indicator

Many people use the **Tab** key or other shortcut to navigate the interactive elements of a web page, like links, buttons, and chips.

When an element is tabbed to, it appears in its focused state with a ring-like **keyboard focus indicator**. This indicator helps web users know where they are on the page.

While focused, an element can be acted on with the keyboard.

![A single filled button in focused state, displaying the keyboard focus indicator.](/assets/23f5fce1-ly2wdmfh-16.CfzMHjgj.webp)

Keyboard focus indicator for a filled button

### Behavior

Focus states are initiated by the user by pressing the **Tab&#x20;**&#x6B;ey on the keyboard (or equivalent).

Focus states can be represented in combination with hover, activated, or selected states.

![A single filter chip simultaneously in selected state and focus state.](/assets/68de9e7d-ly2wf3qd-17.BXNuPxbL.webp)

A selected filter chip in both selected and focused states

There can only be one focus state at a time in a layout.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fly2whda4-GM3-Foundations-Interaction-States-FocusedBehavior-v01.mp4?alt=media" aria-label="Cursor moving from one card in focus state to another card moves the focus state to the second card."></video>

A focus state applied to one card at a time

<a id="c3690714-b741-492d-97b0-5fc1960e43e6"></a>

## Pressed

A pressed state communicates a user-initiated tap or click via cursor, keyboard, or voice input. This state applies to all interactive components.

Pressed states trigger a change in composition and should be high-emphasis.

A ripple overlay signifies a pressed state. It can be applied to an entire component or elements within a component, or as a circular shape over part of the component.

![Button using a ripple overlay to signify it’s in a pressed state.](/assets/1871b9a4-ly2wj03t-25.DzS0wxEz.webp)

Pressed button

Some components, such as buttons or cards, can inherit elevation to signify a pressed state.

![Button using elevation to signify it’s in a pressed state.](/assets/dd891966-ly2wk46q-26.DQag5Cu2.webp)

Pressed button with elevation

Pressed states **are** inherited by action, selection, and some containment components: 

* Buttons
* Cards
* Checkbox
* Chips
* List items
* Text fields

![Four components shown in pressed state.](/assets/31d6211d-ly2wl23l-27.B9i6OUlo.webp)

Pressed states for:

1. FAB
2. Icon button
3. Chip
4. Segmented button

Pressed states **aren’t** inherited by communication, navigation, or some containment components: 

* App bars
* Badges
* Bottom navigation
* Dialogs
* Menus
* Sheets
* Tabs

::: danger Don't
![Mobile screen showing entire app bar in pressed state is an error.](/assets/69edd683-ly2wo5k7-28.De5WTLhC.webp)

The individual components that are actionable within the app bar inherit pressed states, not the whole app bar
:::

### Behavior

Pressed states are initiated by user keyboard or voice input on an interactive element.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fly2wqo0t-GM3-Foundations-Interaction-States-PressedBehavior-1-v01.mp4?alt=media" aria-label="Enabled state activated to pressed state."></video>

Activated states appear in user-initiated order

Pressed states can be combined with hovered, focused, activated, or selected states.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fly2wrufa-GM3-Foundations-Interaction-States-PressedBehavior-2-v01.mp4?alt=media" aria-label="Hovered state activated to a pressed state."></video>

Activated states can be represented in combination with hover and focus

There may only be a single pressed state at a time in a layout.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fly2wt4k8-GM3-Foundations-Interaction-States-PressedBehavior-3-v01.mp4?alt=media" aria-label="Pressed state on one card at a time."></video>

A pressed state applied to one card at a time

<a id="c97582c4-5fef-42ce-9c34-71f8dcc5b8ad"></a>

## Dragged

A dragged state occurs when a user presses and moves an element or component. Dragged states should be low emphasis, to avoid distracting users from their task.

Dragged states use a lower emphasis overlay. It can be applied to the entire component or to elements within a component.

Some components, such as list items, chips, or cards, can inherit elevation to signify a dragged state.

![List item shown in dragged state.](/assets/952ce854-ly2wu37e-32.RKc13BX8.webp)

Dragged list item

Dragged states **are** inherited by some containment and selection components: 

* Cards
* Chips
* List items
* Sliders

![A chip and a card both shown in dragged state.](/assets/4cb5ade2-ly2wv77r-33.ClVhAMV3.webp)

Dragged states for:

1. Chip
2. Card

Dragged states **aren’t** inherited by action, communication, navigation, or some containment components: 

* App bars
* Badges
* Buttons
* Dialogs
* Menus
* Navigation bar, drawer, and rail

::: danger Don't
![Mobile screen with app bar in dragged state is an error.](/assets/9a5d2084-ly2ww2lq-34.BdqlGVmC.webp)

Components like an app bar that require consistent placement should not inherit dragged states
:::

### Behavior

Dragged states are initiated when users touch and hold elements, using an input method such as a tap or click.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fly2wxglg-GM3-Foundations-Interaction-States-DraggedBehavior-1-v01.mp4?alt=media" aria-label="Going through the states of a draggable list item: 
enabled, hovered, dragged."></video>

A list item in a dragged state

There may only be a single dragged state at a time within a layout.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fly2wyr5e-GM3-Foundations-Interaction-States-DraggedBehavior-2-v01.mp4?alt=media" aria-label="Cursor dragging cards one at a time."></video>

Dragged state applied to one card at a time