Density

How to apply density to Material-UI components.

Applying density

This section explains how to apply density. It doesn't cover potential use cases, or considerations for using density in your application. The Material design guidelines have a comprehensive guide covering these topics in more detail.

Implementing density

Higher density can be applied to some components via props. The component pages have at least one example using the respective component with higher density applied.

Depending on the component, density is applied either via lower spacing, or simply by reducing the size.

The following components have props applying higher density:

Explore theme density

This tool allows you to apply density via spacing and component props. You can browse around and see how this applies to the overall feel of Material-UI components.

If you enable high density a custom theme is applied to the docs. This theme is only for demonstration purposes. You should not apply this theme to your whole application as this might negatively impact user experience. The Material design guidelines has examples for when not to apply density.

The theme is configured with the following options:

const theme = createTheme({
  components: {
    MuiButton: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiFilledInput: {
      defaultProps: {
        margin: 'dense',
      },
    },
    MuiFormControl: {
      defaultProps: {
        margin: 'dense',
      },
    },
    MuiFormHelperText: {
      defaultProps: {
        margin: 'dense',
      },
    },
    MuiIconButton: {
      defaultProps: {
        size: 'small',
      },
      styleOverrides: {
        sizeSmall: {
          // Adjust spacing to reach minimal touch target hitbox
          marginLeft: 4,
          marginRight: 4,
          padding: 12,
        },
      },
    },
    MuiInputBase: {
      defaultProps: {
        margin: 'dense',
      },
    },
    MuiInputLabel: {
      defaultProps: {
        margin: 'dense',
      },
    },
    MuiListItem: {
      defaultProps: {
        dense: true,
      },
    },
    MuiOutlinedInput: {
      defaultProps: {
        margin: 'dense',
      },
    },
    MuiFab: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiTable: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiTextField: {
      defaultProps: {
        margin: 'dense',
      },
    },
    MuiToolbar: {
      defaultProps: {
        variant: 'dense',
      },
    },
  },
});