This article ONLY works when using Avonni Creator. Only customers with an active subscription that was activated on or before December 31, 2021 have access to Avonni Creator.
This article is only valid when working on a Creator project.
Button
Overview
Buttons are clickable items used to perform an action. Buttons should be used in situations where users might need to:
submit a form
begin a new task
trigger a new UI element to appear on the page (modal box)
specify a new or next step in a process
Settings
Variant
To give an appearance for the button.
Base: The base button looks like a plain text link. It removes all the styling of the native button. Use this buttons when the actions are of secondary importance to the content surrounding it, such as in the actions ribbon in a page header.
Neutral: This is a variant to create a neutral button.
Brand: The Brand button generally should only be used once per component screen at any one time. It is used for when there is an action that is clearly more important than the other actions and you need to draw attention to it. An example is when you have a “Save” and “Cancel” button. The “Save” is the primary action.
Inverse: Use the inverse button on dark backgrounds.
Destructive: This button appearance is used to indicate a destructive action to the user, like permanently erasing data.
Success: Creates a green button style.
Label
Text to be displayed on the button.
Icon
To add an icon inside the button (at the left or at the right of the label).
Actions
A Button element is one of the elements available to configure an action.
Video Walkthrough
Avonni Designer vs Avonni Builder comparison table
View all the differences between Avonni Designer and Avonni Builder.
