Buttons enable users to perform actions with a single tap. As a secondary function they are also useful in communicating state.

In this variant the button container stretches according to the parent layout. There is a minimum padding within the button, and a padding of 16px recommended between the button and its surrounding elements.

In this variant the button's container expands with the button's text. Keep a fixed 16px padding between the text and container edge.

All buttons need three properties: Label, Trait=button, and Hint. Below are some guidelines for them:

• Label: This should be one word or a short phrase that describes the action. Eg: "Play song" or "Delete mail". There should not be a period (.) at the end of a label since it is rarely a complete sentence.
• Trait: Always set this to "Button" in the available list.
• Hint: This should be used sparingly. Do not unneccessarily add one. Eg: For a button whose label is "Play song", we do not need any hint. Only if add information not already covered in the short label. Eg of a useful hint "Double tap to sort by file type." Always use complete sentences for Hints, ending with a period (.).
• Disabled state: Uncheck the "User interaction enabled" flag. iOS should take care of appropriate changes to the label and hint.
• Button with state: There are some scenarios where a button is tappable, but also communicates its current state. Eg: for a calendar event we can have an "Accept" button (current state is "Accepted"). In such scenarios, append the label with the current state. "Accept invite. Accepted"