Ctrlk
YouTube ChannelBook A Demo🪄 Build with AIJoin The Community
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Button

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

The Avonni Button component is an interactive control used to trigger actions such as navigation, form submission, or custom events. Use it whenever you need a clickable element that runs flow logic, with full control over its style, icon, and behavior.

Overview

A button is the simplest way to let users take action in your component. It supports multiple visual variants, an optional icon (either a Lightning Design System icon or a custom uploaded image), flexible icon positioning and sizing, full-width stretching, a disabled state, and a hover tooltip for accessibility.

You define what happens on click from the Interactions tab, where Avonni offers a wide range of built-in behaviors:

  • 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.

Configuration

To configure the Button, select it on the canvas. The Edit Button panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

The Button selected on the canvas, with the Edit Button panel open on the right.
The Properties tab of the Edit Button panel.

Properties

Label

The text displayed inside 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.

Variant

The Variant setting changes the appearance of the button — its color, background, and border. Choose the style that aligns with your design and the button's intended purpose. Available variants are Bare, Bare Inverse, Base, Border, Border Filled, Border Inverse, Brand, Brand Outline, Container, Destructive, Destructive Text, Inverse, Neutral (default), and Success.

Every variant. The three Inverse variants are drawn for dark backgrounds, so they are shown on a dark tile.

Icon Name

Add a Lightning Design System icon to reinforce the action or make the button more visually appealing. Choose any icon from the SLDS icon library.

Icon Position

Place the icon to the Left (default) or Right of the label.

Requires: Icon Name to be set.

The same button with the icon on the left and on the right.

Icon Size

Adjust the size of the icon to match your design needs: Xs (default), Small, Medium, or Large.

The four icon sizes on the same button.

Icon Source

Instead of an SLDS icon, use a custom image as the button icon by providing an image URL or uploading a file. Accepted formats are .apng, .avif, .gif, .jpg, .jpeg, .png, .svg, and .webp.

Stretch

When enabled, the button takes the entire available width of its container.

Disabled

When enabled, the button is disabled and users cannot interact with it.

Title

The text displayed when hovering over the button, providing an accessible tooltip.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Interactions

Interactions define what happens when users interact with the Button. Configure them from the Interactions tab of the Edit Button panel.

Click

Fires when a user clicks the button (ignored when the button is disabled). Use it to chain any of the built-in behaviors listed in the Overview — navigate, show a toast, update records, launch a flow, and more.

Styling

Fine-tune the Button's appearance from the Style tab of the Edit Button panel. The Spacing, Text, Background, and Border color options are set per variant (Base, Bare, Bare Inverse, Border, Border Filled, Border Inverse, Brand, Brand Outline, Container, Destructive, Destructive Text, Inverse, Neutral, Success), so each variant exposes its own hooks.

Controls the outer spacing around the button.

  • Top / Right / Bottom / Left: Adjust the space on each side.

Aligns the button within its container.

  • Horizontal Alignment: Position the button to the left, center, or right.

Controls the inner spacing of the button (set per variant).

  • Block Start / Block End: Adjust the top and bottom padding.

  • Inline Start / Inline End: Adjust the leading and trailing padding.

Styles the button label.

  • Line Height: Set the label's line height.

  • Font Family / Font Size / Font Style / Font Weight: Control the typography.

  • Horizontal Alignment: Align the label within the button.

  • Color / Color Active / Color Hover: Set the label color for the default, active, and hover states (set per variant).

Sets the button background (set per variant).

  • Color / Color Active / Color Hover: Set the background color for the default, active, and hover states.

Customizes the border.

  • Size: Adjust the border thickness.

  • Style: Choose a border style.

  • Radius: Control the roundness of the corners.

  • Color / Color Active / Color Hover: Set the border color for the default, active, and hover states (set per variant).

Adds a shadow to the button.

  • Shadow: Set the button's shadow.

  • Shadow Focus: Set the shadow shown when the button is focused.

Styles a custom image icon (when Icon Source is used).

  • Border Size / Border Style / Border Color: Customize the image border.

  • Radius: Control the roundness of the image corners.

  • Object Fit: Set how the image fills its area.

Output Variables

The Button exposes one output variable you can reference elsewhere on the page after the user interacts with it.

Button Click

Updates when a user clicks the button.

Output variable
Type
What it returns

Clicked

Boolean

true when the button has been clicked. Use it to conditionally show another component or trigger downstream logic.

If the click runs an Open Confirm interaction and the user cancels the confirmation, Clicked is cleared again, so a component revealed by it does not stay on screen after a cancelled action.

Example: After a user clicks a "Submit" button, use Clicked in a visibility condition on a confirmation message component to reveal it on the same page.

Last updated

Was this helpful?