Skip to main content

Getting started with presentation components

Learn how to use various components to present text, numeric, and graphic information in your app.

Retool provides a variety of componenets that help you display information, alerts, and statuses. These components include:

Demo

Features​

Key features of presentation components include:

  • Dynamic values using JavaScript snippets.
  • Event handlers to define interaction.
  • Customizeable styles.

Specify content options​

The Content section of the Inspector contains settings that control the content of the component, including:

  • Value.
  • Default value.
  • Indeterminate, which shows a loading state with unknown progress for Progress Bar and Progress Circle.
  • States, which defines the list of possible values for Alert and Status.
  • Add-ons, which provide additional informational elements such as tooltips or icons.

To set the possible values for Status and Tags, define an option list either manually or by dynamically mapping an array of data. The states for Alerts must be defined manually.

Configure user interaction​

Progress Bar, Progress Circle, Status, and Text do not support user interaction.

Alert, Statistic, and Tags support user interaction. The Interaction section of the Inspector contains settings that control user interaction. Use event handlers to listen for and handle interactions with your components.

Event handlers for the Tags component apply to all tags shown. Retool does not support individual event handlers for each tag.

Alert has several options for user interaction. You can add an event handler that triggers when the user closes the Alert, or you can add a link—called an action—to the Alert that triggers when clicked. To do so, select the state that you want to change. Then click the Action add-on, and add an event handler.

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.