Reference Guide

Button

The Button component could well sit in the Essentials tool bar too, as it is a basic building block of every Nutshell app. It allows you to add clickable Buttons to your screens, with which an end-user will navigate through your workflow.

Button Styles

It’s generally good practice in user-experience design to use different styled buttons for different purposes. This helps end-users understand the intention of those buttons very quickly, and adopt simple patterns that make your interface more intuitive.

Nutshell comes with three optional button styles for primary, secondary and destructive actions

There are three button styles available for you in Nutshell. These differ only in visual styling – functionally they all do exactly the same thing – so it’s entirely up to you as to whether you use them or not:

Primary
Used for the primary action on the current screen (there should only ever be one). This is the action you want your end-user to use. For example, submitting a form.

Secondary
Used for secondary actions, which need to be there, but aren’t as important as the Primary action. For example, to cancel and go back to a previous page, or reset a form to its default values.

Destructive
Used for actions that will destroy something, and therefore should be used with caution. For example, deleting a database record, which cannot be undone.

You can change the style of the current button in the Properties panel. The styling options for the button affect only the currently selected style, so you can customise them freely.

Button Actions

Most buttons will Submit – i.e. move the end-user to the next logical step in the workflow. Which step comes next depends on how your Links are configured.

Each Link can be configured so that it is only followed if a specific Button is tapped

However, sometimes your end-users may want to reset a form to its default settings – especially if the form is particularly long. If a Button is set to Reset, it will reset all fields on the current screen back to their defaults.

Back Buttons

If all you want to do is add a “back” button, and don’t want to end up with a complex web of Links going back and forth, you can set your Button to go back to the previous screen. If this option is selected, the end-user will be taken back to whichever screen they were on previously, without having to draw a Link back to it manually.

Resizing a Button Component

To resize a Button component, click and drag on a corner of its bounding box. A Button component can only be resized horizontally. The height of a Button component is adjusted by changing the text-size, padding and margins.

Button Properties

When a Button component is selected on the Canvas, the following settings are available in the Properties panel: