Skip to main content

Getting started with buttons and links

Learn how to use buttons and links to help users navigate inside and outside of your app.

Buttons and links enable users to navigate throughout or interact with your app. You configure these components with event handlers. When clicked, they can trigger a query, control a component, or perform another action.

The Button component has a variety of presets and variations. Explore the following playgrounds to discover each of them.

Demo

The Link component has a variety of presets and variations. Explore the following playgrounds to discover each of them.

Demo

The Table component supports the Button column type, enabling you to use buttons within a table.

Features​

Key features of buttons and links include:

  • Configurable icons, text, and accessible names.
  • Input validation.
  • Event handlers triggered on click.
  • Customizeable styles.

Specify content options​

The Content section of the Inspector contains settings that control the content of the button or link, such as:

  • Text, which is displayed on the Button or as the Link text.
  • Accessible name, which is the name for a Button so that it can be identified via screen reader.
  • Add-ons, which include icons and tooltips.
  • Actions, which define a list of options for buttons or links that feature a list, including Dropdown Button, Split Button, and Link List.

You can choose to set the Text setting to a string or to a JavaScript snippet, which is useful if you want the text to be dynamic. For example, you could set the Text of a logout button to Log out {{ current_user.firstName }}.

Define options​

Dropdown Button, Split Button, and Link List all feature a list of buttons or links. You define the list of options manually or dynamically map them from an array of data.

Configure user interaction​

The Interaction section of the Inspector contains settings that control user interaction, such as:

  • Disabled, a truthy value that disables the button or link when evaluated to true.
  • Event handlers, which listen for and handle interactions with your components.

Event handlers determine what happens when you click a button or link. Common actions are Control query, Control component, and Go to URL.

Button and link clicks are non-programmatic, and clicks can only be triggered by direct user action.

Configure option interactivity​

Define interaction for Dropdown Button, Split Button, and Link List on a per-option basis. Select the option you want to edit, and add an event handler in the Interaction section of the pop-up.

Use buttons with forms​

Buttons are automatically included with Forms, but you can configure standalone buttons to configure forms, too. Change the Type to Submit, and select the form that you want to submit.

Customize appearance​

You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector. The settings available in the Appearance section depend on the type of component you use.

All components have a Hidden setting, which you can dynamically control with a truthy value that evaluates to true or false. You can also control the hidden property for a component using the .setHidden() method from event handlers and JavaScript queries.

You can also create custom style rules using the Styles setting. Each component has different styles that you can configure, but common ones include colors, fonts, and text styles. Use app-level or organization-level themes to set these styles across all components.