---
title: "Shapes"
description: "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)."
type: "class"
---

<div class='type'>Class</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
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

```kotlin
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

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@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`.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
@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`.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalMaterial3ExpressiveApi

val extraExtraLarge = extraExtraLarge
```


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



## Functions

```kotlin
@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.


```kotlin
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.