Buttons

Summary:

Used in Alerts:
- 1 to 3 buttons in one alert.
Used in Forms:
- One button per line.
Textual labels, no icons.
Instant visual feedback with touch down and release.
Two custom button designs described below.

Java

Related design guidelines

Buttons are used in Alerts to provide options for continuing the flow. They use text labels. With touch down, the button shows a highlight colour so the user knows the button press is registered. With touch release, the action is triggered, and the highlight disappears.

Figure 1. Timed alert, alerts with 1 - 3 buttons and with optional icons

You can define 0 to 3 commands for your alert. These commands will appear as buttons on the UI.

If there are no commands defined for your Alert, it will be a timed alert that closes after a certain time-out.
For 1 button use cases the button is usually 'OK'; some neutral action to confirm that the user has acknowledged the information given.
For 2 button use cases the left button is for the positive command ('OK', 'Done', 'Continue'), and the right button is for the negative command ('No', 'Back', 'Exit'). So they follow the same logic as the softkeys in previous Series 40 platform releases.
For 3 button use cases the upmost button is the assumed default command (the old 'middle soft key command'), lower left button is for the secondary command, and the lower right button is for cancelling command.

Buttons can also be used in Forms where it is only possible to have one button in one line. So in case two separate buttons are needed, the buttons are placed on top of each other. In Form, you can define your StringItem to be of type 'button', and it will appear as a button in the UI. The button has the same size in both orientations.

Figure 2. Buttons in a Form

Custom buttons

Note: The buttons described below are not supported by the Java components, but are examples of look & feel you could create with your custom made buttons. You could either use Canvas to draw these kinds of buttons, or use the CustomItem on Form.

Wrap button. This button would basically be a switch for having either of the items selected and highlighted at all times. By tapping the unselected button it gets the highlight and triggers the defined mode on. At the same time selection is removed from the previously selected button and the highlight colour disappears. The visual look is similar to the button pair in dialogs, like for example in Figure 2.

Figure 3. Wrap button in Radio

Squircle button. This button style is used in Contact card, for example. It has a squircle shaped button and a text label below the button. Tapping the button gives a visual feedback to the user by showing a pressed state for the button. The action is triggered with touch release.

Figure 4. Squircle button in Contact card