About shape

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.


Shaping material

About shape

Material surfaces have a rectangular shape by default, with 4dp rounded corners. Their shape can be customized by adjusting their: The size of shape changes...

Material surfaces have a rectangular shape by default, with 4dp rounded corners. Their shape can be customized by adjusting their:

  • Corner angles and curves
  • Edge angles and curves

The size of shape changes can be subtle or more significant.

The default Material shape can be customized.

Usage

Because unique shapes stand out, they can direct attention to different parts of a screen. Shape provides a way for users to recognize components and...

Emphasis

Because unique shapes stand out, they can direct attention to different parts of a screen.

This combination of a round floating action button and curved bottom app bar stands out from the rectangular shapes elsewhere on screen.

Identity

Shape provides a way for users to recognize components and identify different Material surfaces.

These entry chips can be identified by their consistent use of shape.

State

You can communicate an element’s change of state by using a different shape from the rest of the elements or surfaces in that group. When using shape to indicate a state change, use it consistently with that state, in every instance it occurs.

This card changes shape upon selection to indicate it’s been selected.

Branding

To express a brand’s visual language throughout an app, use shape in tandem with other customizations (like color) in consistent ways. Small adjustments to shape, applied strategically through an app, contribute to the overall impression a brand makes.

The consistent use of shape throughout this app helps express its brand.

Displaying shape

Shape is made visible when surface edges have sufficient contrast against their background. By default, Material Design makes shapes noticeable by using shadows to display...

Shape is made visible when surface edges have sufficient contrast against their background. By default, Material Design makes shapes noticeable by using shadows to display surfaces edges. Other methods to show surface edges and shapes can be used in combination with shadows, or on their own, such as color fills and opacity, .

DoA colored fill on this floating action button contrasts with the content on the surface behind it, making its surface edges and shape noticeable.
Don'tA semi-transparent surface and white color makes it hard to see the edges and shape of this floating action button.

Shape and meaning

Communicating meaning

Shapes can be used to reflect a specific purpose or meaning. Text or icons can help reinforce that meaning when the shape of a surface...

Shapes can be used to reflect a specific purpose or meaning. Text or icons can help reinforce that meaning when the shape of a surface alone could be ambiguous.

DoThe menu has an arrow-like corner that points toward the navigation drawer, reinforcing that these components are connected.
Don'tDon’t use shapes in ways that create ambiguous meaning. This Cancel button’s label text implies that it will return the user to a previous point in the flow, but the arrow-shaped button points forward, as though it continues the flow’s progress.

Components and shape

Shaping components

Shape both helps users identify components and affects how usable they are. The degree to which components can change their shape depends on:

Shape both helps users identify components and affects how usable they are. The degree to which components can change their shape depends on:

  • If a component relies on its shape for identification
  • If it has ergonomic requirements, such as a minimum touch target size
Don'tDon’t use shapes that make components unrecognizable.
Don'tDon’t use shapes that interfere with a component’s ability to receive user input. This button has a touch target that is too small.
Don'tDon’t use shapes that make a component unrecognizable. These buttons look very similar to the chips above them, which makes it difficult to distinguish the two components.

Shape customization tool

The Material shape customization tool can be used to generate different shapes for various individual components. A table of shape value ranges indicates recommended value ranges for each component.

Components are organized into three categories, based on their relative size. Components linked to their category will inherit the shape values assigned to the category. Alternatively, individual component corners can be shaped independent of their category’s values.


Implementation

Shapes implementation across supported platforms is indicated below.

Platform Status
Android Available
iOS Available
Web Available
Flutter Available

Up next