Button

The Avonni Button component provides customizable buttons to initiate actions, navigate pages, or perform specific functions.

Setting Up Your Button

Add a Label

The label is the text displayed on the button. It should clearly communicate the button's purpose and what action will occur when the user clicks it.

Best Practices:
- Use concise and action-oriented labels (e.g., "Save," "Submit," "Cancel," "Learn More").
- Avoid generic labels like "Click Here."
- Ensure the label accurately reflects the button's function.

Choose a Style (Variant)

Select a visual style that aligns with your design and the button's intended purpose. The "Variant" setting controls the button's appearance, including its color, background, border, and overall style.

Available Variants:

Bare: A text-only button with minimal styling, suitable for subtle actions.
Bare Inverse: A bare button with inverted colors, ideal for use on dark backgrounds.
Base: A standard button with a solid background color, suitable for general use.
Border: A button with a visible border and a transparent background, useful for less prominent actions.
Border-Filled: A button with a border and a solid background color, a good balance of visibility and style.
And many more! Explore the full range of variants in the component's properties panel to find the perfect match for your design.

Enhance your button with an icon to reinforce the action or make the button more visually appealing.

Icon Library: Choose from a vast library of icons to find one that aligns with the button's purpose.
Size and Position: Adjust the icon's size and position it to the left or right of the label text.

Define Interactions

This is where your button comes to life! The "Interactions" tab allows you to define what happens when a user clicks the button. Avonni provides a wide range of built-in interactions, including:

Navigation & User Feedback:
- Flow Navigation: Control the flow of your screens, seamlessly guiding users between screens.
- Show Toast: Provide non-intrusive feedback to users with toast messages.
- Navigate: Link to various pages within Salesforce or external websites.
Data Interaction:
- Download: Allow users to download files associated with records.
- Export To: Enable users to export data to Excel or CSV formats.
- Update Records: Automatically save changes made.
- Copy Records: Allow users to copy data from data table records.
User Engagement & Flow Control:
- Open Alert Modal: Display important messages requiring user acknowledgment.
- Open Confirm: Prevent accidental actions with user confirmation prompts.
- Open Flow Dialog: Launch predefined Salesforce flows.
- Open Flow Panel: Slide in a panel to display another flow.
- Fire Confetti: Celebrate user actions with a confetti animation.
Data Refresh:
- Refresh Query: Update data displayed in Avonni components.
- Refresh All Queries: Update all data from query data sources.
Quick Actions:
- Open Quick Action: Quickly access standard or custom Salesforce actions

Last updated 2 days ago

Was this helpful?

Setting Up Your Button

Add a Label

The label is the text displayed on the button. It should clearly communicate the button's purpose and what action will occur when the user clicks it.

Best Practices:

Use concise and action-oriented labels (e.g., "Save," "Submit," "Cancel," "Learn More").
Avoid generic labels like "Click Here."
Ensure the label accurately reflects the button's function.

Choose a Style (Variant)

Available Variants:

Bare: A text-only button with minimal styling, suitable for subtle actions.

Bare Inverse: A bare button with inverted colors, ideal for use on dark backgrounds.

Base: A standard button with a solid background color, suitable for general use.

Border: A button with a visible border and a transparent background, useful for less prominent actions.

Border-Filled: A button with a border and a solid background color, a good balance of visibility and style.

And many more! Explore the full range of variants in the component's properties panel to find the perfect match for your design.

Enhance your button with an icon to reinforce the action or make the button more visually appealing.

Icon Library: Choose from a vast library of icons to find one that aligns with the button's purpose.

Size and Position: Adjust the icon's size and position it to the left or right of the label text.

Define Interactions

This is where your button comes to life! The "Interactions" tab allows you to define what happens when a user clicks the button. Avonni provides a wide range of built-in interactions, including:

Navigation & User Feedback:

Flow Navigation: Control the flow of your screens, seamlessly guiding users between screens.
Show Toast: Provide non-intrusive feedback to users with toast messages.
Navigate: Link to various pages within Salesforce or external websites.

Data Interaction:

Download: Allow users to download files associated with records.
Export To: Enable users to export data to Excel or CSV formats.
Update Records: Automatically save changes made.
Copy Records: Allow users to copy data from data table records.

User Engagement & Flow Control:

Open Alert Modal: Display important messages requiring user acknowledgment.
Open Confirm: Prevent accidental actions with user confirmation prompts.
Open Flow Dialog: Launch predefined Salesforce flows.
Open Flow Panel: Slide in a panel to display another flow.
Fire Confetti: Celebrate user actions with a confetti animation.

Data Refresh:

Refresh Query: Update data displayed in Avonni components.
Refresh All Queries: Update all data from query data sources.

Quick Actions:

Open Quick Action: Quickly access standard or custom Salesforce actions