Density and sizing

The size and density props are used to reduce the overall space a component takes up, and sometimes font-size, height, padding, and margins.

<PageFeatures /> <PromotedEntry />

Guide

The size and density props are used to reduce the overall space a component takes up, and sometimes font-size, height, padding, and margins.

Size

This property reduces or increases the width and height a component takes up, as well as font-size.

• x-small
• small
• default
• large
• x-large

Example

The following example shows the size for various components:

<ExamplesExample file="concepts/size" preview />

Density

Reduces vertical padding and sometimes font size. Square/round components like icons will also reduce horizontal padding.

• default
• comfortable
• compact

Example

The following example shows the density for various components:

<ExamplesExample file="concepts/density" preview />

::: warning

Not all components have a default transition that animates height when changing density.

:::

Combined

Combine the size and density props to easily change the overall size of a component.

Example

The following example shows the size and density for various components:

<ExamplesExample file="concepts/density-and-size" preview />