14.0.0 • Published 12 months ago

@material/touch-target v14.0.0

Weekly downloads
39,208
License
MIT
Repository
github
Last release
12 months ago

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

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:

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

Note that the wrapper <span> element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).

Styles

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

Style Customization

Sass Mixins

MixinDescription
mdc-touch-targetApplied to the inner touch target element.
mdc-touch-target-componentApplied to the component root element. Adds margin to compensate for the increased touch target.
14.0.0

3 years ago

13.0.0

4 years ago

12.0.0

4 years ago

11.0.0

4 years ago

10.0.0

4 years ago

9.0.0

4 years ago

8.0.0

5 years ago

7.0.0

5 years ago

6.0.0

5 years ago

5.1.0

5 years ago

5.0.0

5 years ago

4.0.0

6 years ago

4.0.0-canary.1

6 years ago

4.0.0-canary.0

6 years ago

4.0.0-alpha.0

6 years ago