> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/button-icon.md). # Button Icon The Avonni Button Icon component displays an icon-only button using a Lightning Design System icon or a custom image. Use it wherever a compact, accessible action trigger is needed without a text label. ## Overview Button Icon renders a single clickable icon button. You control the icon, its visual style (variant), size, and whether it is enabled or disabled. An alternative text field ensures screen readers can describe the button to users who cannot see it. ## Configuration To configure the Button Icon, select it on the canvas. The configuration panel opens on the right. The sections below mirror the Properties tab. ### Properties #### Icon Name The **Icon Name** setting specifies the Lightning Design System icon to display. Type or search for any SLDS icon name (for example, `utility:edit` or `action:new_note`). #### Icon Source Use **Icon Source** to supply a custom image instead of an SLDS icon. Enter a public image URL or a Salesforce Content Document ID. Accepted formats: APNG, AVIF, GIF, JPG, JPEG, PNG, SVG, WEBP. #### Variant The **Variant** setting changes the visual appearance of the button. The default is **Neutral**. | Variant | Description | | -------------------- | -------------------------------------------------------- | | **Base** | Icon only, no background or border. | | **Bare** | Transparent background, no border. | | **Bare Inverse** | Bare style for use on dark backgrounds. | | **Border** | Adds a visible border around the icon. | | **Border Filled** | Border with a filled background. | | **Border Inverse** | Border style for use on dark backgrounds. | | **Brand** | Salesforce brand-color background. | | **Brand Outline** | Brand-color border, transparent background. | | **Container** | Contained appearance with a subtle background. | | **Destructive** | Red background to signal a dangerous action. | | **Destructive Text** | Red icon color without a filled background. | | **Inverse** | Inverted colors for use on dark backgrounds. | | **Neutral** | Standard button appearance (default). | | **Success** | Green style to indicate a successful or positive action. | #### Size The **Size** setting controls how large the button icon appears. The default is **Medium**. | Size | Value | | ---------------- | -------- | | XXS | xx-small | | XS | x-small | | Small | small | | Medium (default) | medium | | Large | large | #### Disabled When **Disabled** is enabled, the button is grayed out and users cannot interact with it. #### Title The **Title** field sets a tooltip that appears when a user hovers over the button. Use this to provide additional context about the action. #### Type The **Type** setting specifies the HTML button behavior. The default is **Button**. | Type | Description | | ---------- | ------------------------------------------------- | | **Button** | A standard clickable button (default). | | **Reset** | Resets a form to its default values when clicked. | | **Submit** | Submits a form when clicked. | #### Alternative Text The **Alternative Text** field provides a screen-reader description of the icon. This is important for accessibility — enter a short phrase that describes the button's action (for example, "Edit record" or "Delete item"). ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Button Icon. Configure them from the **Interactions** tab of the Edit Button Icon panel. ### Click Fires when a user clicks the button. Use this to navigate to a page, open a modal, launch a flow, or trigger any other action in your experience. ## Output Variables The Button Icon exposes this output variable you can reference elsewhere on the page after the user interacts with it. ### Click | Output variable | Type | What it returns | | --------------- | ------- | ---------------------------------------------------------------------------------------- | | **Clicked** | Boolean | `true` when the user clicks the button; resets to `false` on the next interaction cycle. | > **Example:** When a user clicks the Button Icon, use **Clicked** to conditionally show a confirmation message or trigger a visibility rule on another component. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/button-icon.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.