Components

App Builder is not supported for your selected Datadog site ().

Join the Beta!

Datadog App Builder is in private beta. Complete the form to request access.

Request Access

This page provides a list of UI components that you can use when creating apps in App Builder.

Many component properties allow you to select from provided values. If you want to use an expression for a property’s value, click </> next to the property to use the code editor. For more information on using JavaScript in App Builder, see JavaScript Expressions.

Button components have the following properties.

General

Label
The text that displays on the button.
Value: string or expression

Appearance

Intent
Controls the color of the button, with colors representing the purpose of the button.
Provided values: default, danger, success, warning
Is Primary
Designed to call user attention to the most important action(s) for a given page or workflow.
Provided values: on, off
Is Borderless
Removes the border from any button. On hover, it gets a background fill.
Provided values: on, off
Is Loading
Shows a loading indicator.
Provided values: on, off
Is Disabled
Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event
Value: click
Reaction
Values: custom, set component state, trigger query, open modal, close modal, open url, download file

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Callout value components have the following properties.

General

Label
The text that displays at the top of the component.
Value: string or expression
Value
The value that the callout highlights.
Value: string or expression
Unit
The unit associated with the value.
Value: string or expression

Style

Style
The visual style of the component.
Provided values: default, success, warning, danger, blue, purple, pink, orange, yellow, red, green, gray, vivid blue, vivid purple, vivid pink, vivid orange, vivid yellow, vivid red, vivid green
Size
Responsively sizes the metric so that it is proportional to the sizing of the value.
Provided values: sm, md, lg, xl

Appearance

Is Loading
Shows a loading indicator.
Provided values: on, off
Is Disabled
Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the EC2 Instance Manager app blueprint.

Checkbox components have the following properties.

General

Label
The text that displays at the top of the component.
Value: string or expression
Options
The list of checkboxes that a user can select from. The format is an array of objects where each object consists of a label and value key-value pair. The minimum number of options is 1.
Value: expression
Example:
${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": "production"
  }
]}

Appearance

Is Multiline
Determines whether the checkbox text should wrap onto a new line or be truncated by an ellipsis.
Provided values: on, off
Is Disabled
Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event
Value: change
Reaction
Values: custom, set component state, trigger query, open modal, close modal, download file

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Container components have the following properties.

Appearance

Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Date range picker components have the following properties.

General

Default timeframe
The default timeframe that the date picker displays.
Provided values: past 5 minutes, past 30 minutes, past 1 hour, past 4 hours, past 1 day

Appearance

Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event
Value: change
Reaction
Values: custom, set component state, trigger query, open modal, close modal, download file

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

JSON input components have the following properties.

General

Label
The text that displays at the top of the component.
Default value
The default JSON value that the component displays.

Appearance

Is Read Only
Determines whether the component is read only.
Provided values: on, off
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event
Value: change
Reaction
Values: custom, set component state, trigger query, open modal, close modal, download file

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Modal components have the following properties.

General

Title
The title of the modal.
Value: string or expression

Appearance

Size
The scale of the modal.
Provided values: sm, md, lg
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event
Values: toggleOpen, close, open
Reaction
Values: custom, set component state, trigger query, open modal, close modal, download file

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Number input components have the following properties.

Label
The text that displays at the top of the component.
Value: string or expression
Default value
The default value that the app populates in the input box.
Value: number or expression that evaluates to a number
Placeholder text
The text that displays when no value is entered.
Value: string or expression

Validation

Min
The minimum value the number input accepts.
Value: number or expression that evaluates to a number
Max
The maximum value the number input accepts.
Value: number or expression that evaluates to a number

Appearance

Is Disabled
Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event
Value: change
Reaction
Values: custom, set component state, trigger query, open modal, close modal, download file

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the ECS Task Manager app blueprint.

Radio components have the following properties.

General

Label
The text that displays at the top of the component.
Value: string or expression
Options
The list of radio button options that a user can select from. The format is an array of objects where each object consists of a label and value key-value pair.
Value: expression
Example:
${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": "production"
  }
]}
Default value
The value that is selected when the radio loads.
Value: string or expression

Appearance

Is Disabled
Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event
Value: change
Reaction
Values: custom, set component state, trigger query, open modal, close modal, download file

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Search components have the following properties.

General

Default value
The default value that the app populates in the search box.
Value: string or expression
Placeholder text
The text that displays when no value is entered.
Value: string or expression

Appearance

Size
The scale of the search component.
Provided values: sm, md, lg
Is Loading
Shows a loading indicator.
Provided values: on, off
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event
Values: change, submit
Reaction
Values: custom, set component state, trigger query, open modal, close modal, download file

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the EC2 Instance Manager app blueprint.

Select components have the following properties.

General

Label
The text that displays at the top of the component.
Value: string or expression
Placeholder text
The text that displays when no value is entered.
Value: string or expression
Options
The list of select options that a user can select from. The format is an array of objects where each object consists of a label and value key-value pair.
Value: expression
Example:
${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": "production"
  }
]}
Default value
The value that is selected when the select loads.
Value: string or expression
Is Multiselect
Determines whether the user can select more than one option at a time.
Provided values: on, off

Appearance

Is Disabled
Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event
Value: change
Reaction
Values: custom, set component state, trigger query, open modal, close modal, download file

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Table components have the following properties.

General

Data source
The array of objects to display in a table.
Values: query, demo data, components

Columns

Each column of data from the data source is represented here and has the following properties:

Label
The text that displays at the top of the column.
Value: string or expression
Data path
JSON path to access values nested within objects and arrays of a given column.
Value: string or expression
Formatting
The type of format that the column takes on.
Provided values: string, link, status pill, date / time, markdown, tags, percent bar, number, score bar, avatar
Sortable
Determines whether the user can sort by the column.
Provided values: on, off

Some columns have additional properties based on their Formatting property.

Pagination

Has summary
Determines whether to display a pagination summary directly above the table.
Provided values: on, off
Page size
Number of rows per page to display.
Value: number or expression that evaluates to a number
Total count
Total number of rows to display in the table.
Value: number or expression that evaluates to a number
Type
Determines the type of pagination.
Provided values: client side, server side

Row actions

Adding a row action adds an Actions column to the table, which contains user-defined action buttons. These buttons have the following properties:

Label
The text that displays on the action button.
Value: string or expression
Primary
Designed to call user attention to the most important action(s) for a given page or workflow.
Provided values: on, off
Borderless
Removes the border from any button. On hover, it gets a background fill.
Provided values: on, off
Disabled
Applies disabled styling and removes interactions.
Provided values: on, off
Level
Controls the color of the button according to its intent.
Provided values: default, danger, success, warning
Reaction
The reaction type the button triggers. Values: custom, set component state, trigger query, open modal, close modal, open url, download file

Appearance

Is Loading
Shows a loading indicator.
Provided values: on, off
Has text wrapping
Determines whether cell text wraps.
Provided values: on, off
Scrollable
Determines what ways the table is scrollable in.
Provided values: both, vertical
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event
Values: pageChange, tableRowClick
Reaction
Values: custom, set component state, trigger query, open modal, close modal, download file

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

For examples showing how to use advanced features of tables, see Tables.

Text components have the following properties.

General

Content
The content that the component displays.
Value: string or expression
Content type
Determines how to render the text.
Provided values: plain text, Markdown

Appearance

Text alignment
Determines the horizontal alignment of the text within the component.
Provided values: align left, align center, align right
Vertical alignment
Determines the vertical alignment of the text within the component.
Provided values: align top, align center, align bottom
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Text input components have the following properties.

Label
The text that displays at the top of the component.
Value: string or expression
Default value
The value that is selected when the text input loads.
Value: string or expression
Placeholder text
The text that displays when no value is entered.
Value: string or expression

Appearance

Is Disabled
Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible
Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event
Values: change, submit
Reaction
Values: custom, set component state, trigger query, open modal, close modal, download file

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Further reading

Additional helpful documentation, links, and articles:


Do you have questions or feedback? Join the #app-builder channel on the Datadog Community Slack.