material-components_material-components-ios/components/Buttons/docs

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 Floating Action Button instances which typically only have an icon.

Objective-C

button.accessibilityLabel = @"Create";

Swift

button.accessibilityLabel = "Create"

Minimum touch size

Make sure that your buttons have a minimum touch area. The Google Material spec for buttons calls for buttons that have a visual height of 36 and that touch areas should be at least 48 points high and 64 wide.

Set the touch size

To keep a button's visual sizes small with larger touchable areas, set the hitAreaInsets to a negative value. Be careful to maintain sufficient distance between the button touch targets. This will allow your button to have a large enough touch target while maintaining the desired visual appearance. For more see the layout guidance in the spec.

Objective-C

  CGFloat verticalInset = MIN(0, -(48 - CGRectGetHeight(button.bounds)) / 2);
  CGFloat horizontalInset = MIN(0, -(48 - CGRectGetWidth(button.bounds)) / 2);
  button.hitAreaInsets = UIEdgeInsetsMake(verticalInset, horizontalInset, verticalInset, horizontalInset);

Swift

let buttonVerticalInset =
  min(0, -(kMinimumAccessibleButtonSize.height - button.bounds.height) / 2);
let buttonHorizontalInset =
  min(0, -(kMinimumAccessibleButtonSize.width - button.bounds.width) / 2);
button.hitAreaInsets =
  UIEdgeInsetsMake(buttonVerticalInset, buttonHorizontalInset,
                   buttonVerticalInset, buttonHorizontalInset);

Set the minimum visual size of the button

Set your buttons to have a minimum size. Google Material Buttons guidelines typically recommend a minimum height of 36 points and a minimum width of 64 points.

Objective-C

button.minimumSize = CGSizeMake(64, 36);

Swift

button.minimumSize = CGSize(width: 64, height: 48)

Exceptions

However there are some clear exceptions for these rules. Please adjust your buttons sizes accordingly.

Using accessibilityHint

Apple rarely recommends using the accessibilityHint because the label should already be clear enough to indicate what will happen. Before you consider setting an -accessibilityHint consider if you need it or if the rest of your UI could be adjusted to make it more contextually clear.

A well-crafted, thoughtful user interface can remove the need for accessibilityHint in most situations. Examples for a selection dialog to choose one or more days of the week for a repeating calendar event:

• (Good) The dialog includes a header above the list of days reading, "Event repeats weekly on the following day(s)." The list items do not need accessibilityHint values.
• (Bad) The dialog has no header above the list of days. Each list item (representing a day of the week) has the accessibilityHint value, "Toggles this day."