Button
Buttons give people a way to trigger an action. They’re typically found in forms, dialog panels, and dialogs. Some buttons are specialized for particular tasks, such as navigation, repetitive actions, and presenting menus.
Best practices
Layout
For dialog boxes and panels, where people are moving through a sequence of screens, right-align buttons with the container.
For single-page forms and focused tasks, center-aligned primary buttons are used.
Always place the primary button on the right, and the secondary button to the left.
Show only one primary button that inherits theme color at rest state. If there are more than two buttons with equal priority, all buttons should use the primary button.
Don't place the default focus on a button that destroys data. Instead, place the default focus on the button that performs the "safe act" and retains the content (such as "Save") or cancels the action (such as "Cancel").
Content
Use sentence-style capitalization (capitalize the first word only)
Ensure it's clear what will happen when people interact with the button. Be concise; usually a single verb is best. Include a noun if there is any room for interpretation about what the verb means. For example, "Delete folder" or "Create account".
Call to Action (CTA / C2A)
A call to action button, depending on the situation, will usually prompt users to sign up/register/buy now/etc. CTA buttons should be used where the platform wants to strongly suggest something that the user should do.
Use primary button as shown below for CTA
Primary action
CTA button and a primary button can look the same because primary buttons should be a strong visual indicator to help the user complete their journey. Primary buttons should be used in situations where the user may want to go ‘next’, ‘start’, ‘add’, etc.
Use primary button as shown below for CTA
Secondary Action
Secondary buttons are the ‘go back’ to the primary button’s ‘next’, or the ‘cancel’ button to the ‘submit’ button. Secondary buttons are the alternative we give users to the primary action.
Use secondary button as shown below for secondary action
Tertiary Action
Tertiary buttons are usually used for miscellaneous actions: the action is important, but may not be what the user is looking to do. It means things like ‘add new’, ‘edit’, or ‘delete’, provided that they aren’t a primary action.
Use a tertiary button as shown below for tertiary action
Primary button - Filled buttons have more emphasis, as they use a color fill and shadow.
Secondary Button - Outlined buttons are used for more emphasis rather than text buttons due to the stroke.
Tertiary button - Text buttons are typically used for less important actions.
Text Button
States
Transitions
Image Button
States
Transitions
How to make your Tesseract Mixed Reality Button
The JMRTK buttons are defined as a layers that allow the perception of depth using flat 2D elements by adding gutter (gap) between the layers as shown below:
Example of layers in a Text Button
Example of layers in a Toggle Button
Defining Layers for Color and Animation
To use animations and color system defined as part of JMRTK, your custom button must implement the following layers -
Primary Plate: Represents the Main Color
Mask Plate: Used to add gradient effect to the primary color
Glow Plate: Glow Plate becomes active when a user clicks on a button. It shows a blink effect
Press Plate: Whenever a button is pressed, this animated circle plate is used to represent the click interaction and gives user feedback that the button is pressed.
These are Animated and work on a click as shown in the example below:
Last updated
