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
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.
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.
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.
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.
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
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.
Last updated
Was this helpful?