---
description: How to add, edit and style buttons.
---

# Buttons

The button part is commonly used in Appeggio and has many options for you to play with.

{% hint style="success" %}
**Location in the Parts Library:** Most used parts > Buttons
{% endhint %}

{% embed url="https://youtu.be/evI8ZmnT02U" %}
How To Add and Style Buttons
{% endembed %}

## **Adding a Button**

To add a button, select the part where you’d like to add your button and click ‘+’.&#x20;

There is a wide range of pre-styled buttons for you to choose from.&#x20;

Some variations are text-only, icon-only, text with append and prepend icons, and more.&#x20;

All the pre-styled buttons are either the default color or set to the primary color. [Colors](../customising-and-formatting/colors-and-themes) and properties are easily changeable.&#x20;

Choose from one of the pre-styled buttons:&#x20;

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F8r39AG4JWEqr6JD4iXHf%2FButtonSuite.gif?alt=media&#x26;token=6c6d4055-1aae-4ef9-9051-c34c615a73d2" alt=""><figcaption><p>Example Buttons</p></figcaption></figure>

## **Formatting the Button**

### **Changing the Colors of the Button**

Buttons have more [color](../customising-and-formatting/colors-and-themes) properties than most other parts. The button itself has a background color, and the parts within the button (such as text and icons) are colored with the foreground color.&#x20;

You can also change the colors of the button in an active state, when focused, and on hover.&#x20;

To change the button color when the button is being hovered, select the button and open the 'Colors on Hover' editor on the right. Now you can set your preferred background and foreground color combination to signify that the button is being hovered.

The 'Color on Focus' editor on the right refers to the color of the button after it has been clicked, or if the user tabs to the button.&#x20;

The 'Color on Active' editor on the right refers to the color of the button when it is active (the moment it is clicked).

The background colors of the button can be a [color gradient](../customising-and-formatting/color-gradients).

### Sizing

Buttons come with preset sizes, as well as the ability to set the exact size. The preset sizes can be made responsive. Here is an example of a standard button that has been assigned different sizes according to breakpoints. As the device size gets bigger, so does the button:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F7aj8HZhkioYwjsOnLa2I%2FButtonPresetSizing.gif?alt=media&#x26;token=71b08130-80b1-4fc6-a800-eec20c70cd94" alt=""><figcaption><p>Sizing a Button</p></figcaption></figure>

### Applying Shadow

[Shadow](../customising-and-formatting/shadow) can be applied to the inner or outer of the button using the Decoration Editor, in the 'Shadow' tab. You can choose how much shadow should be applied in this editor, as well as the color of the shadow. &#x20;

### Changing the Shape of the Button

#### Rounding

Default buttons are naturally rounded.

Buttons can be further softened and rounded using the Decoration Editor, in the 'Rounding' tab.

[Rounding](../customising-and-formatting/rounding) can be applied to all of the button, the top left, top right, bottom left, and bottom right, or a combination of these. There are various degrees of rounding ranging from none to full, with incremental size points in between.&#x20;

To remove all rounding from a button, giving it a hard edge, choose rounding of 'none'.

In the rounding editor, when 'full' is applied to 'all' of the button, the button will have a pill shape.

To make the button completely round, select the button, then open the Shape editor in the right menu. The Shape editor can also make the button square.

#### Block and Wide Buttons

If 'Block' is selected, the button will take up the full width of its container.&#x20;

By selecting 'Wide', the button will become wider, but will not necessarily take up the full width of its container.

#### Glass&#x20;

The 'Glass' property gives your button a glass effect. The glass effect is most noticeable when the button is on the top of another part, and a hint of what is behind the button becomes visible.

#### Button Variants

There are three button variants:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FNHYbxToPgyrIcVJz9rBD%2FButtonVariants.png?alt=media&#x26;token=374f8773-6e96-4342-af76-e6439200fa23" alt=""><figcaption><p>Button Variants</p></figcaption></figure>

The 'Ghost' variant creates a button that looks like text only.&#x20;

The 'Link' variant creates a button that looks like an underlined link.

The 'Outline' variant creates a button with an outline.&#x20;

#### The Shape Property

The 'Shape' property can change the button shape to a square or a circle. This property is most effective when there is very little text in the button, or if the button contains an icon only.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2Fn8lZnaefPCpfqC7gHoSH%2FButtonShapeCircleSquare.gif?alt=media&#x26;token=fc765079-a171-4819-a699-929682dc79a4" alt=""><figcaption><p>The Button 'Shape' Property</p></figcaption></figure>

### The Button Border

Buttons naturally come with a white border. This may be noticeable if your button is on top of a colored background. To change the color of the border select the button, go to the property panel on the right and select 'Border', then change the color to your desired color.&#x20;

You can also use the border property to add a different style of [border](../customising-and-formatting/borders) to the button, also choosing the color and thickness of the border:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FvphY2uJYCNDb5AiIjHHG%2FButtonsAddBorder.gif?alt=media&#x26;token=466d321c-1f48-4bdb-a95d-6865c7fe6cff" alt=""><figcaption><p>Adding and Styling a Border on a Button</p></figcaption></figure>

### Adding An Icon to a Button

Select the button. Add a default [icon](icons) by clicking "+" Icons. Select your preferred base icon. An icon will be added to the end of the button (the 'append slot').

To change the default icon, select the icon to activate the Icon Editor in the right menu. Then click on Icon > Value Set to reveal all of the icons available for you to choose from, and select.

To change the position of an icon within the button, select the icon, and go to Slot Position. You'll see there is the ability to append or prepend the icon. Prepending the icon places it at the beginning, and appending the icon places it at the end.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FeSh7AW3hIvAy4pgxi88h%2FButtonAddIcon.gif?alt=media&#x26;token=c53c44f6-8e9d-49f2-a3a9-9654e26580e8" alt=""><figcaption><p>Adding an Icon to a Button</p></figcaption></figure>

## Changing the Text and Font&#x20;

The [text](text) within a button can be changed using the Font Editor. You can change the font family, size,  weight, line height, and style.

## Linking the Button

To add a [link](../customising-and-formatting/adding-links) to your button, first select the button. On the right editor menu, select 'link to', and you'll see the current list of pages within your app that you can link to. If the page you want to link to within your app hasn't been created yet, select 'new page'. You'll then be prompted to complete some details for your new page. You can also link to an external URL.

## Changing the Type of Button

The button Type Editor is used when the button is part of a form to be submitted. So if your form has a submit button,  select the Type Editor, and choose 'submit'.&#x20;

## Changing the State

There are two states for a button, either 'active' or 'disabled'. Select the button's State Editor to select.&#x20;

If the button is set to 'disabled', it will not be clickable, and it doesn't change color, etc when hovered.

If the button is set to 'active', it appears as though it is in an active state.

## Linking Buttons to Functions&#x20;

We can make our buttons 'do things' by linking them to functions. To do this, you can open the Actions Editor on the right and choose what happens on click or double click.



## Related Information&#x20;

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:orange;">Adding links</mark></td><td></td><td></td><td><a href="../customising-and-formatting/adding-links">adding-links</a></td></tr><tr><td><mark style="color:orange;">Icons</mark></td><td></td><td></td><td><a href="icons">icons</a></td></tr><tr><td><mark style="color:orange;">Text</mark></td><td></td><td></td><td><a href="text">text</a></td></tr><tr><td><mark style="color:orange;">Customizing and formatting</mark></td><td></td><td></td><td><a href="../customising-and-formatting">customising-and-formatting</a></td></tr><tr><td><mark style="color:orange;">Forms</mark></td><td></td><td></td><td><a href="../forms">forms</a></td></tr><tr><td><mark style="color:orange;">Joins</mark></td><td></td><td></td><td><a href="../base-parts/layout/joins">joins</a></td></tr></tbody></table>



\#buttons #icons #background gradient #color gradient #opacity #card actions #alignment

\


