Component behavior

The following guidance describes how components behave, both in the grid and between breakpoints.


Positioning terminology

UI elements behave in different ways at each breakpoint range.

Descriptors

The position of UI elements, components, and surfaces in the grid can be described using the following terms: Descriptor Definition Above, below The y position...

Read More

The position of UI elements, components, and surfaces in the grid can be described using the following terms:

Descriptor

Definition

Above, below

The y position of an element

In front of, behind

The z position of an element

Left, right, centered

The x position of an element

Top, bottom

The y position of an element relative to a container or screen edge

Vertically centered

The x and y position of an element are centered relative to a container or screen edges

Sticky

An element that scrolls with the UI and locks at a certain point in the scroll position

Floating

A fixed element positioned in front of scrolling content


Component width

Component width can remain the same across screen sizes, or it can change depending on the layout. Component width can be either:

  • Fixed
  • Fluid

Because fixed width elements retain their width during layout changes, their placement can change to accommodate new layouts. Their placement can be either:

  • Pushed
  • Overlaid

Fixed

When an element has a fixed width, its width stays the same even across screen size changes.

Read More

When an element has a fixed width, its width stays the same even across screen size changes.

Animation of expanding screen size and button maintaining its size

This button component remains fixed against the right margin.

Fluid

When an element has a fluid width, its width expands and contracts as the screen size changes.

Read More

When an element has a fluid width, its width expands and contracts as the screen size changes.

Button expands and contracts as the screen expands and contracts

This button fluidly scales within the right two columns.

Animation of expanding and contracting screen, button becomes too small when contracted

Don’t.

Don’t use a container on fluid components if it’s too narrow to display elements and padding at smaller widths.

Animation of expanding screen size and button growing to be as wide as the screen

Caution.

Use caution when spanning a fluid component across several columns in a wide screen. Certain components, like buttons, might be overly emphasized on larger screen widths.

Push

When layout and screen size change, a component can be pushed from its original position. Component width remains the same, but its position changes horizontally,...

Read More

When layout and screen size change, a component can be pushed from its original position. Component width remains the same, but its position changes horizontally, moving left or right. When this occurs, it may be partially occluded by a screen’s edge if pushed off-screen.

Animation of navigation drawer pushing the content to the right

The content region is pushed off-screen by the navigation drawer.

Overlaid

When a UI changes, a component can be overlaid by other elements that occlude it. When a component is overlaid, its width and position remain...

Read More

When a UI changes, a component can be overlaid by other elements that occlude it. When a component is overlaid, its width and position remain the same.

Animation showing navigation drawer coming in from the left and covering content UI region

The content UI region is covered by the navigational UI region.


Responsive patterns

Components can adapt their dimensions based on screen size and device type, using the following patterns. These dimension adaptations can include:

  • Using different components that fit the space better
  • Altering the visibility of components to accommodate smaller spaces
  • Changing to input methods

As screen space increases, the following responsive patterns may be applied.

Reveal

Parts of the UI hidden by smaller screens can be revealed when additional space becomes available at a designated breakpoint.

Read More

Parts of the UI hidden by smaller screens can be revealed when additional space becomes available at a designated breakpoint.

App on small and large devices

Elements, such as side navigation, can become visible when screen size increases.

Text editing UI on small and large screens

A simple UI may reveal more robust or complex options.

Card on small and large screens

Content that only appears after tapping on a small screen can be revealed by default when more space is available.

Transform

A component can transform from one format to another at a designated breakpoint.

Read More

A component can transform from one format to another at a designated breakpoint.

Side navigation on small screen, tabs on larger screen

Side navigation can transform into tabs on a larger screen.

List on small screen, image list on larger screen

A list can transform into an image list on a larger screen.

Top app bar with open menu on small screen, top app bar with toolbar on larger screen

Menu items can transform into icons in a toolbar on a larger screen.

Divide

UIs with multiple layers can display all of those layers at once when more screen space is available. UI elements are divided across this newly...

Read More

UIs with multiple layers can display all of those layers at once when more screen space is available. UI elements are divided across this newly available space.

App with list items on small screen, app with side navigation and detailed list content on larger screen

Side navigation, list content, and detailed content divide to fill a single view on a larger screen.

App with tabs on small screen, app with UI elements on larger screen

Tabbed sibling content is divided within the same view on a larger screen.

Reflow

A UI may change its layout to reflow across newly available space.

Read More

A UI may change its layout to reflow across newly available space.

Single column with three elements on small screen, two columns with three elements on larger screen

Elements from a single-column format can reflow to fill the content area in various combinations on a larger screen.

Horizontal tabs for 2 categories on small, vertical list with 2 categories on larger screen

Horizontal tabs can reflow into a vertical list on a larger screen.

Small screen: Time in numbers on top, clock image below, Large screen: time in numbers on the left and clock on right

Elements can reflow within a component based on a new screen ratio or device orientation.

Expand

The UI can expand across more space.

Read More

The UI can expand across more space.

Small screen: Vertical card, Large screen: horizontal card

Cards can expand to fill a new and larger space.

Dialogs can expand proportionally with content or in specific increments.

Position

The position of UI components can change to more appropriate locations.

Read More

The position of UI components can change to more appropriate locations.

Small screen: Bottomsheet with share, upload and copy icons and text labels, Large screen: Menu with share, upload and copy

A bottom sheet on a small screen can reposition itself as a menu on a larger screen.

A floating action button (FAB) on small and large screens

A floating action button (FAB) can move to a more visible location relative to other UI elements on a larger screen.