Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material/touch-target) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Material Design guidelines: Touch Targets

Installation

npm install @material/touch-target

Basic Usage

HTML Structure

For a given button component:

<button class="mdc-button">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">My Inaccessible Button</span>
</button>

You would add an increased touch target as follows:

<div class="mdc-touch-target-wrapper">
  <button class="mdc-button mdc-button--touch">
    <div class="mdc-button__ripple"></div>
    <div class="mdc-button__touch"></div>
    <span class="mdc-button__label">My Accessible Button</span>
  </button>
</div>

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

@use "@material/touch-target/mdc-touch-target";

Style Customization

Sass Mixins

Mixin	Description
`wrapper`	Applied to the wrapper touch target element.
`touch-target`	Applied to the inner touch target element.
`margin`	Applied to the component root element. Adds margin to compensate for the increased touch target.