Button

tile/button

Shows a clickable element that triggers an action. A button includes semantic and visual variants, optional icon decoration, and the loading state.

NameRequiredLightning TypeDefaultDescription
actionsNolightning__textTypeActions invoked by user interaction, keyed by event name.
iconNameNolightning__iconNameA semantic icon identifier shown next to the label.
labelYeslightning__textTypeThe required text string for the button.
variantNolightning__textTypeprimaryChanges the appearance of the button. Valid values include primary for main actions, secondary for supporting actions, or destructive for dangerous actions.

Use a button for a user-initiated action. For the main call-to-action, use the primary variant. Use the secondary variant for supporting actions, and destructive for irreversible or dangerous actions. Avoid placing two primary buttons side by side.

To create a link for navigation, use tile/link instead.

To reinforce the action, add an iconName. The value is an identifier such as edit, trash, or plus, which maps to an icon on each surface.

To lay out multiple buttons horizontally, wrap the buttons with tile/row.

Use these variant values to convey the button’s role and emphasis.

  • primary (default): The main call-to-action in a view, such as “Save” or “Submit”. Use one primary button per group of actions.
  • secondary: A supporting action paired alongside a primary button, such as “Cancel” next to “Save”.
  • destructive: An irreversible or dangerous action, such as deleting a record or canceling a subscription.

Consider these guidelines when working with buttons.

  • Keep labels short and action-oriented, for example, “Save” or “Send Message”.
  • Pick an iconName that reinforces the label rather than replaces it; the label is always required, even for icon-led buttons.

Note any limitations that apply to this component.

No known limitations for tile/button in Slackbot.

No known limitations for tile/button in ChatGPT.

No known limitations for tile/button in Agentforce.