Appeggio Help
Search…
Buttons
This section takes you through adding and editing buttons within Appeggio.
The button part is a commonly used part in Appeggio and has a multitude of options for you to play with.
The default button in Appeggio contains an icon, text, and a slight elevation with some soft rounding:
The button is a great starting point for you to edit and adapt as needed.

Adding a button

To add a button, select the part where you’d like to add your button and press ‘+’ on the toolbar. You can either scroll down the list and find ‘button’, or key in ‘button’ within the filter.
Select 'button'.
You will see that a button and a button editing toolbar has been added as follows:

Choosing the button style

The button toolbar has the ability for you to choose the style of the button. See the 'alternative styles' icon in the image below:
When you select 'alternative styles', you'll see various button styles to choose from, as follows:
Simply select the style of button you'd like, then format the button using the button toolbar.

Formatting the button

You can format your button with some common settings using the button toolbar to adjust the weight, alignment, size and color of the text, as well as color of button. You can also hyperlink the button if needed.
For the full range of formatting functions, click the dropdown and you’ll see a menu of ways to format your button.
The shortcut key for this action is the C key for ‘Change’.
If you already know what you need to do, you can use the filter function rather than scrolling through the list until you find what you’re looking for.
The icon can be deleted if you only want text in the button, and conversely you can delete the text if you only want to keep the icon.

Changing the icon in the button

To change the default icon, select the icon within the button. This will activate the icon toolbar. Then click on the ‘icon’ image within the toolbar to reveal all of the icons available for you to choose from, as shown below:
There are over 5,000 icons available for you to choose from. The filter function can help you locate your preferred icon.
If you would prefer the icon to appear after the text, there are a couple of options. You can select the icon and ‘move up’, as shown below:
This action will place the icon after the text.
Alternatively, you can delete the icon, then select the button which will open the button toolbar. Then add (‘+’) icon from the dropdown menu. This will add an icon to the button, after the text, as shown below:

Shaping the Button

There are various shaping options available within the dropdown menu of the button toolbar:

Rounding

There are several rounding options that will round the edges of the button to varying degrees:
Here are some of the different rounding options in action:

Tile

To remove all rounding so that your button has hard edges, make sure the rounding is set to default, and then select ‘tile’ from the menu. Your button will have hard edges like this:

Floating action button

The ‘fab’ action in the button menu turns your button into a round floating action button. For this style of button, it’s best to remove text because you want to show the icon in the middle. To achieve this, select the text and delete it. Then choose the icon you’d like.
Once you’ve chosen your icon, go to the dropdown menu in the icon toolbar, and select ‘fab’. Your button will become rounded, like this:

Icon

The icon feature of the button may be useful if you want an icon only without the appearance of a button, but retaining the hyperlinking ability of the button. When you select ‘icon’ from the dropdown menu of the button toolbar, the icon and the text will be visible. Delete the text if it is not required.
Outlined makes the background transparent and applies a thin border.
Text makes the background transparent, leaving you to focus on the text.

Sizing the button

There are various sizing options available within the dropdown menu of the button toolbar.
‘Block’ expands the button to 100% of the available space. This is shown in the example below where the button to the left is the default size and position, and the button to the right has block formatting applied:
‘Height’ sets the height of the part. In the image below, the button to the left is the default height, the middle button has a height of 75, and the button on the right has a height of 25:
‘Width’ sets the width for the part.
‘Max height’ sets the maximum height for the part, and ‘min height’ sets the minimum height for the part.
‘Max width’ sets the maximum width for the part, and ‘min width’ sets the minimum width for the part.
‘Large’ makes the part large, and ‘small’ makes the part small. ‘X large’ makes the part extra large, and ‘X small’ makes the part extra small.

Margins and padding

Margin adds space outside of the button. This can be applied to all, horizontal, vertical, top, right, bottom and left. There is more information on margins here.
Padding adds space around a part’s content inside of the button. This can be applied to all, horizontal, vertical, top, right, bottom and left. There is more information on padding here.

Elevation

The default button comes with a slight elevation meaning that the button appears to have a small shadow surrounding it. To change the elevation, go to the dropdown menu within the button toolbar and change the elevation.
The elevation can be applied to the button between 0 and 24. The button on the left has zero elevation, and the button to the right has an elevation of 24:
The ‘depressed’ function in the button dropdown menu operates in a similar manner and removes the button box shadow, but still maintains the background color.

Changing colors

The color of the button itself can be changed, as can the text and icon inside the button. You can select from theme colors or mix your own color. There is more information on colors here.

Editing button text

There are some options within the button toolbar dropdown menu to format the text in addition to those on the toolbar itself.
‘Font italic’ applies italics to the text within the button, ‘font size’ sets the size of the text within the button, and ‘font weight’ applies specified emphasis to the text within the part.
‘Text align’ applies alignment to the text within the button - left, center and right.
‘Text transform’ applies a transformation to the text within the part - lowercase, uppercase and capitalize. Text transform can also wrap the text.

Hyperlinking the button

The button can be hyperlinked either to an external site or to a screen within your app. You do this by clicking on the ‘link’ icon in the button toolbar, as shown below:
Then select the screen you you want to link to, create a new screen, or add the URL to an external site.
You can also create a hyperlink via the button dropdown menu, and selecting ‘To’, which brings up the same menu as above.
Last modified 2mo ago