Component behavior

This page describes how components behave in a layout, both in relationship to the grid as well as breakpoints.


Position terminology

UI elements behave in different ways at each breakpoint range. The position of UI elements, components, and surfaces in the grid are described with the terms below.

Position termDefinition
Above; belowThe y position of an element
In front of; behindThe z position of an element
Left; right;
center
The x position of an element
Top; bottomThe y position of an element relative to a container or screen edge
Vertically
centered
The x and y position of an element centered relative to a container or the screen edges
StickyAn element that scrolls with the UI and locks at a certain point in the scroll range
FloatingA fixed element positioned in front of scrolling content
Leading edgeThe edge of a screen or layout that written content begins from. For example, in LTR languages such as English, this is usually the left edge of a screen
Trailing edgeThe edge of a screen or layout where written content ends

Component adaptation

Component adaptation describes changes in visual presentation (padding, size, layout, or alignment), or switching out one component for another that is  better suited to the device size and use case.

Visual presentation

Visual presentation is the most common method of adaptation. This type of adaptation affects the scale and placement...

Visual presentation is the most common method of adaptation. This type of adaptation affects the scale and placement of content and objects on screen, as well as their relationships to each other. For example, a text list on a mobile device can adjust margins, vertical spacing, or density to better fit larger screens like tablets.

Size constraints

Material Components have minimum and maximum values for container dimensions, margins, and padding. For size constraints of each component, visit the Components section.

For example, snackbars have a maximum width of 600dp for large screens. These minimum and maximum values allow for continuous change to the component’s visual presentation as a layout expands from mobile to large screens.

When scaling a layout, components can have fixed or responsive widths within the range of size constraints.

Elements with fixed widths remain the same width regardless of a screen’s size.

Diagram of a mobile UI scaling as a button stays the same size
The button component remains fixed in position and size along the right margin.

Elements with responsive widths expand and contract as a screen size changes.

Diagram of a mobile UI scaling as a button scales
The button scales in response to the two columns on the right side.
Diagram of a mobile UI scaling down as a button scales, becoming too small to accommodate its label
Don'tDon’t use a container on responsive components if the screen is too narrow to display elements and padding at smaller widths.
Diagram of a mobile UI scaling up as the button scales to remain full-width
CautionUse caution when enlarging a responsive component across several columns in a wide screen. Certain components such as buttons can become overly emphasized at larger screen widths.

Internal Composition

When scaling a component, define the position and alignment of its internal elements in relationship to the container.

For example, the icon and text label within an icon button remain anchored to each other and remain centered while the button expands horizontally.

Two buttons of different widths, with the internal elements centered in both
A button's internal elements maintain a consistent relationship as the component scales

For more complex components, like app bars, internal elements can be grouped and anchored to multiple points within the container.

For example, a menu icon and logo can be grouped and anchored to the leading edge, while a search bar is anchored to the center, and action icons  are anchored to the trailing edge.

Diagram of an app bar in Fortnightly, labeling elements anchored to each edge
1. Logo and menu icon anchored to the leading edge of Fortnightly's app bar 2. Account picker anchored to the trailing edge of Fortnightly's app bar

A component’s internal composition should accommodate the ergonomic needs of the device on which it’s displayed. For example, a horizontally-oriented card on a mobile device can shift to a more square-shaped card on larger screens. This adaptation gives more prominence to imagery and allows for larger type styles to enhance readability.

Two cards shown in different orientations
Cards can change orientation on larger screens.


Component swapping

As a layout scales across screen sizes, functionally equivalent components can be interchanged to make large-scale changes to the ergonomic and functional qualities of an interface.

As a layout changes across screen sizes, components with similar functions can also be exchanged. This makes it possible to adjust a layout for large-scale changes to the ergonomic and functional qualities of an interface.

For example, a bottom navigation bar can swap with a navigation rail on tablets, and a navigation drawer on larger screens.

Components can switch types as well. For example, a full-screen dialog on mobile can  be exchanged with a simple dialog on larger screens. This component change maintains the function of the dialog, while also making use of screen space in a way that preserves a user’s context by revealing underlying content.

Mobile UI showing a full-screen dialog and tablet UI showing a simple dialog with the same content
A full screen dialog can adapt to a simple dialog on larger screens.

Some functionally-equivalent component groups are defined below.

Component typeMobile optionTablet optionLaptop option
NavigationBottom navigationNavigation railNavigation drawer
NavigationModal navigation drawerModal navigation drawerPermanent navigation drawer
CommunicationFull-screen dialogSimple dialogSimple dialog
ActionBottom sheetMenuMenu

Use caution when swapping components by ensuring that the interchangeable components are functionally equivalent. Do not, for example, swap a button for a chip. Use caution when changing between list items and cards. The component swap should always serve a functional and ergonomic purpose for the user.


Responsive patterns

The arrangement of components in a layout can also adjust with changes in screen sizes. This adaptation occurs either by repositioning the component or concealing/revealing information based on available screen space.

Reveal

Parts of the UI that are hidden by smaller screens can be revealed when additional space becomes available at larger breakpoints.

Parts of the UI that are hidden by smaller screens can be revealed when additional space becomes available at larger breakpoints.

Elements, such as side navigation, can become visible when the screen size increases.
A UI can reveal more robust or complex options, such as additional editing features in a doc.
Content that only appears after tapping on a small screen (1) can be revealed by default when more space is available (2).
Mobile UI with overflow menu and tablet UI with actions exposed in the app bar
Menu items (1) can transform into icons in a toolbar on a larger screen (2).

Reposition

An interface, and the components that comprise it, can reflow or reposition to take advantage of additional screen space.

An interface, and the components that comprise it, can reflow or reposition to take advantage of additional screen space. Repositioning is also  a way to address changing ergonomics and input methods on different screen sizes.

Diagram of regions of the screen reflowing from mobile to tablet
Elements in a single-column format can reflow to fill the content area on a larger screen.
Diagram of tabs on mobile reorganized into a vertical list on tablet
Horizontal tabs can reflow into a vertical list on a larger screen.
A bottom sheet on a mobile UI, and overflow menu on a tablet UI
A bottom sheet with menu items on a small screen be swapped for a menu on a larger screen.
Mobile UI with FAB in lower right corner, tablet UI with FAB at the top of the navigation rail
The Floating Action Button can be repositioned to account for the ergonomics of a larger screen.

Up next