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:

• Alert
• Progress Bar and Progress Circle
• Statistic
• Status
• Tags
• Text

Alert

Demo

Progress Bar

Demo

Progress Circle

Demo

Statistic

Demo

Status

Demo

Tags

Demo

Text

Demo

Features

Key features of presentation components include:

• Dynamic values using .
• 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.

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.