Buttons

Material design buttons allow users to take actions, and make choices, with a single tap. There are many distinct button styles including text buttons, contained buttons, and floating action buttons.

Overview

MDCButton is a highly-configurable UIButton implementation that provides support for shadow elevation, Material Design ripples, and other stateful design APIs.

Installation

• Typical installation

Usage

• Typical use: themed buttons
• Typical use: floating action buttons
• Customizing elevation
• Customizing floating action buttons
• Interface Builder

Extensions

• Theming
• Color Theming
• Typography Theming

Accessibility

To help ensure your buttons are accessible to as many users as possible, please be sure to review the following recommendations:

Set -accessibilityLabel

Set an appropriate accessibilityLabel value if your button does not have a title. This is often the case with MDCFloatingButton instances which typically only have an icon.

button.accessibilityLabel = @"Create";

Minimum touch size

Set the frame

Set your buttons to have a minium size. Material Touch guidelines typically recommend a height and width of 48 points.

button.minimumSize = CGSizeMake(48, 48);

Set the touch size (alternative)

An alternate approach is to set the hitAreaInsets to a negative value to make the touch target larger than the visual appearance of the button. When you do this you should be careful to make sure you maintain an 8-point distance between the button touch targets. This will allow your button to have a large enough touch target while maintaining the desired visual appearance.

  CGFloat verticalInset = MIN(0, -(48 - button.frame.size.height) / 2);
  button .hitAreaInsets = UIEdgeInsetsMake(verticalInset, 0, verticalInset, 0);

When you do this make sure to follow the rest of the layout guidence and pad buttons with the recommended space.