Shapes

Class
Common
class Shapes
@ExperimentalMaterial3ExpressiveApi
constructor(
    val extraSmall: CornerBasedShape = ShapeDefaults.ExtraSmall,
    val small: CornerBasedShape = ShapeDefaults.Small,
    val medium: CornerBasedShape = ShapeDefaults.Medium,
    val large: CornerBasedShape = ShapeDefaults.Large,
    val extraLarge: CornerBasedShape = ShapeDefaults.ExtraLarge,
    largeIncreased: CornerBasedShape = ShapeDefaults.LargeIncreased,
    extraLargeIncreased: CornerBasedShape = ShapeDefaults.ExtraLargeIncreased,
    extraExtraLarge: CornerBasedShape = ShapeDefaults.ExtraExtraLarge,
)

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

The shape scale defines the style of container corners, offering a range of roundedness from square to fully circular.

There are different sizes of shapes:

  • Extra Small
  • Small
  • Medium
  • Large, Large Increased
  • Extra Large, Extra Large Increased
  • Extra Extra Large

You can customize the shape system for all components in the MaterialTheme or you can do it on a per component basis.

You can change the shape that a component has by overriding the shape parameter for that component. For example, by default, buttons use the shape style “full.” If your product requires a smaller amount of roundedness, you can override the shape parameter with a different shape value like Shapes.small of MaterialTheme.shapes.

To learn more about shapes, see Material Design shapes(https://m3.material.io/styles/shape/overview).

Parameters
extraSmall A shape style with 4 same-sized corners whose size are bigger than RectangleShape and smaller than Shapes.small. By default autocomplete menu, select menu, snackbars, standard menu, and text fields use this shape.
small A shape style with 4 same-sized corners whose size are bigger than Shapes.extraSmall and smaller than Shapes.medium. By default chips use this shape.
medium A shape style with 4 same-sized corners whose size are bigger than Shapes.small and smaller than Shapes.large. By default cards and small FABs use this shape.
large A shape style with 4 same-sized corners whose size are bigger than Shapes.medium and smaller than Shapes.extraLarge. By default extended FABs, FABs, and navigation drawers use this shape.
extraLarge A shape style with 4 same-sized corners whose size are bigger than Shapes.large and smaller than CircleShape. By default large FABs use this shape.
largeIncreased A shape style with 4 same-sized corners whose size are bigger than Shapes.medium and smaller than Shapes.extraLarge. Slightly larger variant to Shapes.large.
extraLargeIncreased A shape style with 4 same-sized corners whose size are bigger than Shapes.large and smaller than Shapes.extraExtraLarge. Slightly larger variant to Shapes.extraLarge.
extraExtraLarge A shape style with 4 same-sized corners whose size are bigger than Shapes.extraLarge and smaller than CircleShape.

Secondary Constructors

constructor(
    extraSmall: CornerBasedShape = ShapeDefaults.ExtraSmall,
    small: CornerBasedShape = ShapeDefaults.Small,
    medium: CornerBasedShape = ShapeDefaults.Medium,
    large: CornerBasedShape = ShapeDefaults.Large,
    extraLarge: CornerBasedShape = ShapeDefaults.ExtraLarge,
) : this(
    extraSmall = extraSmall,
    small = small,
    medium = medium,
    large = large,
    extraLarge = extraLarge,
    largeIncreased = ShapeDefaults.LargeIncreased,
    extraLargeIncreased = ShapeDefaults.ExtraLargeIncreased,
    extraExtraLarge = ShapeDefaults.ExtraExtraLarge,
)

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

The shape scale defines the style of container corners, offering a range of roundedness from square to fully circular.

There are different sizes of shapes:

  • Extra Small
  • Small
  • Medium
  • Large, Large Increased
  • Extra Large, Extra Large Increased
  • Extra Extra Large

You can customize the shape system for all components in the MaterialTheme or you can do it on a per component basis.

You can change the shape that a component has by overriding the shape parameter for that component. For example, by default, buttons use the shape style “full.” If your product requires a smaller amount of roundedness, you can override the shape parameter with a different shape value like Shapes.small of MaterialTheme.shapes.

To learn more about shapes, see Material Design shapes(https://m3.material.io/styles/shape/overview).

Parameters
extraSmall A shape style with 4 same-sized corners whose size are bigger than RectangleShape and smaller than Shapes.small. By default autocomplete menu, select menu, snackbars, standard menu, and text fields use this shape.
small A shape style with 4 same-sized corners whose size are bigger than Shapes.extraSmall and smaller than Shapes.medium. By default chips use this shape.
medium A shape style with 4 same-sized corners whose size are bigger than Shapes.small and smaller than Shapes.large. By default cards and small FABs use this shape.
large A shape style with 4 same-sized corners whose size are bigger than Shapes.medium and smaller than Shapes.extraLarge. By default extended FABs, FABs, and navigation drawers use this shape.
extraLarge A shape style with 4 same-sized corners whose size are bigger than Shapes.large and smaller than CircleShape. By default large FABs use this shape.

Properties

Common
@ExperimentalMaterial3ExpressiveApi

val largeIncreased = largeIncreased

A shape style with 4 same-sized corners whose size are bigger than Shapes.medium and smaller than Shapes.extraLarge. Slightly larger variant to Shapes.large.

Common
@ExperimentalMaterial3ExpressiveApi

val extraLargeIncreased = extraLargeIncreased

A shape style with 4 same-sized corners whose size are bigger than Shapes.large and smaller than Shapes.extraExtraLarge. Slightly larger variant to Shapes.extraLarge.

Common
@ExperimentalMaterial3ExpressiveApi

val extraExtraLarge = extraExtraLarge

A shape style with 4 same-sized corners whose size are bigger than Shapes.extraLarge and smaller than CircleShape.

Functions

@ExperimentalMaterial3ExpressiveApi
    fun copy(
        extraSmall: CornerBasedShape = this.extraSmall,
        small: CornerBasedShape = this.small,
        medium: CornerBasedShape = this.medium,
        large: CornerBasedShape = this.large,
        extraLarge: CornerBasedShape = this.extraLarge,
        largeIncreased: CornerBasedShape = this.largeIncreased,
        extraLargeIncreased: CornerBasedShape = this.extraLargeIncreased,
        extraExtraLarge: CornerBasedShape = this.extraExtraLarge,
    ): Shapes

Returns a copy of this Shapes, optionally overriding some of the values.

fun copy(
        extraSmall: CornerBasedShape = this.extraSmall,
        small: CornerBasedShape = this.small,
        medium: CornerBasedShape = this.medium,
        large: CornerBasedShape = this.large,
        extraLarge: CornerBasedShape = this.extraLarge,
    ): Shapes

Returns a copy of this Shapes, optionally overriding some of the values.