LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Installation & License Management
    • Quick Start Guide
    • Learning the Basics
    • Reactive Data Components
  • Experience Components
    • 🖼️View All Components
    • Accordion
    • Accordion Section
    • Alert
    • Audio
    • Avatar
    • Avatar Group
    • Banner
    • Bar Code
    • Blockquote
    • Button
    • Button Dialog
    • Button Group
    • Button Menu
    • Calendar
    • Card
    • Chip Container
    • Container
    • Data Table
    • Feed
    • Gallery
    • Icon
    • Illustration
    • Image
    • Kanban
    • Language Selector
    • Layout
    • List
    • Map
    • Media Object
    • Metric
    • Navigation
    • Profile Card
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Publisher
    • Record Detail
    • Separator
    • Tabs
    • Text Block
    • Timeline
    • Video
  • Properties Panel
    • Appearance
    • Interactions
      • Show Toast
      • Navigate
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
  • Tutorials
    • General
      • Expressions for Aura Sites
      • Expressions for LWR Sites
    • Components
      • Banner
        • With Illustration and Buttons
        • With Content centered
      • Card
        • Creating a MapCard Showcase
      • Data Table
        • Configuring the Data Table to display current related record information
        • Displaying Salesforce CMS Files in a Data Table
      • Image
        • Utilizing Avonni Image Component for Before-and-After Image Comparisons
      • Layout
        • Configuring the Layout to be responsive
      • Map
        • Set up the map to show record details information
      • Profile Card
        • Set up the Profile Card to display current user information
      • Tabs
    • Interactions
      • Configure the Open Flow Dialog to open a flow by clicking a button
    • Reactive Components
      • Interactive Map
      • Linked Data Tables
      • Guide to Implementing
    • Use Cases
      • Building a record detail page header
      • Creating a MapCard Showcase
      • Creating a Grid Layout
      • Utilizing Avonni Image Component for Before-and-After Image Comparisons
  • HELP
    • How do I contact support?
    • How do I report bugs?
    • Release Notes
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Overview
  • Tutorials
  • Link to interactions
  • Types of 'Link to' Interactions
  • Specifications

Was this helpful?

  1. Experience Components

Button

Last updated 1 year ago

Was this helpful?

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

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.

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

:

:

:

:

:

Show Toast
Navigate
Open Alert Modal
Open Confirm
Open Flow Dialog
Page cover image