Touch Target

Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, a button may appear to be 48 x 36 px, but the padding surrounding it comprises the full 48 x 48 px touch target.

Material Design spec states that touch targets should be at least 48 x 48 px. The MDC Web library provides mixins and guidance on adding an increased touch target for the following components:

  • Button
  • Chips
  • Checkbox
  • Radio
  • Mini FAB

Design & API Documentation

Installation

Basic Usage

HTML Structure

For a given button component:

You would add an increased touch target as follows:

Note that the outer mdc-touch-target-wrapper element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).

Styles

Style Customization

Sass Mixins

MixinDescription
wrapperApplied to the wrapper touch target element.
touch-targetApplied to the inner touch target element.
marginApplied to the component root element. Adds margin to compensate for the increased touch target.