Buttons
How to add, edit and style buttons.
Last updated
Was this helpful?
How to add, edit and style buttons.
Last updated
Was this helpful?
The button part is commonly used in Appeggio and has many options for you to play with.
Location in the Parts Library: Most used parts > Buttons
To add a button, select the part where you’d like to add your button and click ‘+’.
There is a wide range of pre-styled buttons for you to choose from.
Some variations are text-only, icon-only, text with append and prepend icons, and more.
Choose from one of the pre-styled buttons:
You can also change the colors of the button in an active state, when focused, and on hover.
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.
The 'Color on Active' editor on the right refers to the color of the button when it is active (the moment it is clicked).
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:
Default buttons are naturally rounded.
Buttons can be further softened and rounded using the Decoration Editor, in the 'Rounding' tab.
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.
If 'Block' is selected, the button will take up the full width of its container.
By selecting 'Wide', the button will become wider, but will not necessarily take up the full width of its container.
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.
There are three button variants:
The 'Ghost' variant creates a button that looks like text only.
The 'Link' variant creates a button that looks like an underlined link.
The 'Outline' variant creates a button with an outline.
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.
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.
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.
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'.
There are two states for a button, either 'active' or 'disabled'. Select the button's State Editor to select.
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.
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.
#buttons #icons #background gradient #color gradient #opacity #card actions #alignment
All the pre-styled buttons are either the default color or set to the primary color. and properties are easily changeable.
Buttons have more 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.
The background colors of the button can be a .
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.
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.
You can also use the border property to add a different style of to the button, also choosing the color and thickness of the border:
Select the button. Add a default by clicking "+" Icons. Select your preferred base icon. An icon will be added to the end of the button (the 'append slot').
The within a button can be changed using the Font Editor. You can change the font family, size, weight, line height, and style.
To add a 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.
Adding links
Icons
Text
Customizing and formatting
Forms
Joins
