Button

Overview

The Avonni Button Component is designed to initiate actions when the user clicks. Highly customizable, the button component enhances the user experience, making interactions with your website smooth and intuitive. It’s ideal for various actions such as form submissions, navigation, initiating processes, or triggering modals and popups.

Tutorials

Link to interactions

The Avonni Button Component for Salesforce Experience Cloud sites offers 'Link to' interaction setting. This feature lets you define specific actions or behaviors when users click the button.

Types of 'Link to' Interactions

1. Show Toast:

   • Functionality: Triggers a brief notification, or 'toast', upon button click.

   • Usage in Experience Cloud: Ideal for providing immediate feedback or confirmation messages like "Action Successful" or "Saved Successfully". Toast messages are non-intrusive and disappear after a few seconds, making them suitable for quick alerts.

2. Navigate:

   • Functionality: Redirects the user to a different page or URL.

   • Usage in Experience Cloud: Essential for guiding users through a series of steps or directing them to additional resources, enhancing site navigation and user journey.

3. Open Alert Modal:

   • Functionality: Opens a modal window displaying an alert message.

   • Usage in Experience Cloud: Useful for displaying important information or warnings that require user acknowledgment before proceeding, such as terms and conditions or privacy notices.

4. Open Confirm:

   • Functionality: Displays a confirmation dialog asking users to confirm their action.

   • Usage in Experience Cloud: Ideal for actions with significant consequences (like deleting a record), ensuring that users make informed decisions.

5. Open Flow Dialog:

   • Functionality: Initiates a screen flow created in Salesforce Flow Builder.

   • Usage in Experience Cloud: This feature is perfect for guiding users through a multi-step process or collecting information via a structured flow. It can be used for applications like customer surveys, data entry forms, or interactive guides.

By configuring the 'Link to' interaction settings on the Avonni Button Component, you can create a more dynamic and interactive experience on your Salesforce Experience Cloud site. These interactions make the user journey smoother and more engaging by providing instant feedback, navigating through the site, presenting crucial information, confirming user actions, or guiding users through a process.

Specifications

Properties

Name	Description	Usage
Label	Define the text displayed on the button.	Enter a concise, clear label that indicates the button’s action to the user.
Icon Name	Choose an icon to display on the button.	Select an appropriate icon that visually represents the button’s action, enhancing user comprehension.
Icon Position	Determine the position of the icon within the button.	Choose a position that visually balances the button and aligns with the design direction of your webpage.
Variant	Select a predefined style variant for the button.	Choose a variant that suits the context of the button’s action and the overall design language of the webpage.
Horizontal Alignment	Define the horizontal alignment of the button within its container.	Align the button to achieve visual harmony and meet the layout requirements of the webpage.
Strech	Determine whether the button should stretch to fill its container.	Enable this option to make the button expand horizontally, filling the available space within its container.
Disabled	Control the button’s active or disabled state.	Disable the button to prevent user interaction, useful in conditions where a certain action is not applicable or should be prevented temporarily.

Appearance

Spacing (Top, Bottom, Left, Right)

• Margin-top, Margin-bottom, Margin-left, Margin-right: These control the space around the button in each direction. Use these to precisely position your buttons, avoiding overlap with other elements and creating breathing room.

Label/Icon

• Color: The default color of the button's text or icon.

• Color Active: The color the text/icon changes to when the button is clicked or tapped.

• Color Hover: The color the text/icon changes to when the user hovers their mouse over the button.

• Font Family: Specifies the typeface used for the button's text label. Ensure it aligns with your site's overall design and is easy to read.

• Font Size: Controls the size of the label's text. Adjust for readability and emphasis as needed.

• Font Style: Sets the style of the text, such as normal, italic, or oblique. Use sparingly for special emphasis.

• Font Weight: Dictates the boldness of the text. Consider using different weights to differentiate primary and secondary buttons.

Background

• Background Color: The default color of the button's background.

• Background Color Active: The button's background color when clicked or tapped.

• Background Color Hover: The background color when the user hovers their mouse over the button.

Border

• Border Color: The color of the button's border.

• Border Color Active: The border color when the button is active.

• Border Color Hover: The border color when the user hovers their mouse over the button.

• Border Size: The thickness of the border (in pixels).

• Border Style: The type of border: solid, dotted, dashed, etc.

• Border Radius: Controls how rounded the button's corners are. Higher values lead to softer, rounder buttons