Easily build custom UIs

Views overview

TypeLiteral

children

enum

color

Render a slimmer button with less padding.

compact

Show a confirmation dialog before completing the button action.

If the user confirms, the dialog will close and the action will complete.

If the user cancels, the dialog will close and the action will not complete.

Set to true for a default confirmation dialog or customize the dialog title, body,
and buttons.

confirm

disabled

If true, the button will take up the full width of its container.

fullWidth

This can be either:

A string URL to navigate to when the button is clicked.

A task or view to navigate to in the form of { task: "task_slug" } or { view: "view_slug" }. You can also provide optional params.

href

The ID referenced by the global component state.

string

leftAlign

Icon to include on the left side of the button.

leftIcon

loading

Whether the href URL should open in a new tab.

newTab

Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect.

If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row.

If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row.

If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row.

To set offset based on the screen size, use an object with a specific offset for each breakpoint.
e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%.

offset

onClick

MouseEventHandler<HTMLButtonElement>

Built in button appearances that apply a set variant and color. The variant and/or
color can be overriden by specifying a custom variant or color.

primary: The primary page action. Usually there should only be one of these that
  represents the single most important thing a user can do.
secondary: Secondary actions on a page. These are important, but not as important
  as the primary.
tertiary: Supplmental actions that can be done on a page.
danger: Actions that delete or do otherwise dangerous actions.

preset

radius

Icon to include on the right side of the button.

rightIcon

The runbook mutation to execute on button click.

runbook

size

CSSObject

The task query to execute on button click.

task

type

Fine-grained button appearance. Prefer using preset.

filled: Filled with a color
outline: White button outlined with a color.
light: Filled with a light shade of a color.
subtle: Creates a text button with no fill or outline.

variant

Width of the component. This component must be a direct child of a <Stack> for this prop to take effect.

If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up
the entire row, 6 is half, 1 is 1/12.

If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row.

If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row.

content indicates that the component should take up as much space as its content.

auto indicates that the component should take any leftover space on the row.

To set width based on the screen size, use an object with a specific width for each breakpoint.
e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%.

width

UnconnectedButton is a task-aware button that is not connected to the global component state.

This should be used sparingly - mostly for buttons that are created dynamically within other components.

Alignment of the stack on the horizontal axis for column stacks and the vertical axis for row stacks.

align

Items of the stack. To specify custom spacing, breakpoints, or offset, use <Stack.Item>.

A string representing the class of the element.

className

direction

Grow the items of the stack to fill the available space.

grow

Position of the stack on the vertical axis for column stacks and the horizontal axis for row stacks.

justify

spacing

Columns that are merged into columns inferred from the data.

columns

Column<TRowData>[]

Callback to transform the columns. This can be used to customize any inferred columns.

columnsTransform

(columns: Column<TRowData>[]) => Column<TRowData>[]

The data, or rows, to display in the table.

data

TRowData[]

defaultPageSize

number

Adds a "download as CSV button" to the table footer.

enableCSVDownload

error

Freezes the row actions column when true.

freezeRowActions

Columns to hide in the table. Reference columns using the column accessor, or the
inferred output field for task backed tables.

hiddenColumns

string[]

Function to choose selected rows on initial render.

isDefaultSelectedRow

(row: TRowData, rowIndex: number) => boolean

isSelectedRow

The message to display when the table has no data.

noData

This is called when the toggle-all-selected-rows checkbox is pressed when
rowSelection is set to "checkbox", with the value of the resulting checkbox.

If isSelectedRow is set, and this is not provided, the
toggle-all-selected-rows checkbox will not be shown.

onToggleAllRows

(value: boolean) => void

This is called when the selection state of a row is toggled. Passes in the row data
as well as the index of the row in the table.

onToggleRow

(row: TRowData, idx: number) => void

outputTransform

(output: TOutput) => TRowData[]

Adds custom components to the end of each row.

rowActions

Adds custom components to an overflow menu at the end of each row.

rowActionsMenu

If set, the row actions column will be set to this width, in pixels.

rowActionsWidth

"single" enables selection of single row while "checkbox" adds a checkbox one each row and enables selection
of multiple rows.

rowSelection

If true, a select all checkbox is shown that allows selecting all rows.
Only applicable if rowSelection="checkbox".

selectAll

showFilter

If set, only columns in this list are shown. Columns that are in both hiddenColumns
and shownColumns are hidden. Reference columns using the column accessor, or the
inferred output field for task backed tables.

shownColumns

The task query to execute. The table data will be populated by the task's output.

title

shadow

Whether the card is surrounded by a 1px border.

withBorder

allowDeselect

Allows clearing the selected item when true.

clearable

The data, or options, to display in the select.

(string | number | SelectItem)[]

defaultDisabled

defaultValue

Select description, displayed below the select input. Can be a string or a React component.

description

Select disabled state. Prefer to use defaultDisabled and component state to disable a select.

Displays error message after the select input. Can be a string or a React component.

Custom function that filters the select options in the dropdown.
Defaults to a substring filter.

filter

(value: string, item: SelectItem) => boolean

initiallyOpened

The component with which the item is rendered.

itemComponent

ItemComponent

Select label, displayed before the select input. Can be a string or a React component.

label

Nothing found label. Can be a string or a React component.

nothingFound

onChange

(output: TOutput) => (string | number | SelectItem)[]

placeholder

If true, the select component is read only.

readOnly

Adds red asterisk on the right side of label and sets required on input element

required

searchable

The task query to execute. The select data will be populated by the task's output.

If true, the select component is rendered without any styling applied. The select dropdown is transparant
and no padding is applied.

unstyled

A single function or an array of functions that validate the input value.

validate

Controlled value of the select. Prefer to use defaultValue and component state.

value

If true, the select dropdown is rendered in a React portal.
Use this if the select is in a table or dialog and is cut off by its parent container.

withinPortal

Whether the checkbox is checked when using as a controlled component. Prefer
using defaultChecked and the global component state.

checked

Description displayed below the checkbox. This can be a string or a React component.

If true, the checkbox is in an indeterminate state.

indeterminate

Checkbox label. This can be a string or a React component.

Callback when checked state changes when using as a controlled component. Prefer
using the global component state.

((value: boolean) => void) & ((checked: boolean) => void)

InputHTMLAttributes

HTMLAttributes

Whether the checkbox is initially checked.

defaultChecked

Whether the checkbox is initially disabled.

Text component.

Renders text but also supports Markdown.

Text component without ref forwarding.

This component is exported for documentation purposes. It should not be used.

Text without automatic formatting like Markdown and paragraph-like margins *

Label component without ref forwarding.

This component is exported for documentation purposes. It should not be used.

A three letter currency code to use, such as GBP, if `format` is set to
`currency`.

currency

Disables the input. Prefer to use defaultDisabled and component state.

format

hideControls

icon

Maximum possible value. Inputs are clamped to this maximum.

Minimum possible value. Inputs are clamped to this minimum.

Callback when input changes when using as a controlled component. Prefer
using the global component state.

((value: number) => void) & ((value: number) => void)

Number of digits after the decimal point.

precision

If `precision` is set, removes the trailing zeros.

removeTrailingZeros

Number by which value will be incremented/decremented with controls and
up/down arrows. Specify `precision` if using a non-integer step.

step

The value of the input when using as a controlled component. Prefer
using defaultValue and the global component state.

The input's disabled state on initial render.

((value: ChangeEvent<HTMLInputElement>) => void) & ((e: ChangeEvent<HTMLInputElement>) => void)

Hint text displayed when the input is empty.

Whether textarea will grow with content until maxRows are reached.

autosize

Maximum number of rows if autosize is set.

maxRows

Number of rows, or minimum number of rows if autosize is set.

minRows

((value: ChangeEvent<HTMLTextAreaElement>) => void) & ((e: ChangeEvent<HTMLTextAreaElement>) => void)

TextareaHTMLAttributes

DividerProps

Adds text after line in horizontal orientation

React.ReactNode

labelPosition

labelProps

Record<string, any>

orientation

Sets height in horizontal orientation and width in vertical

React.CSSProperties

italic

The size and style of the title with 1 being the largest and 6 being the smallest.

Views overview

Getting started

Build a view

Configuration

Core concepts

Component state

Calling tasks and APIs

Component library

Advanced concepts

Layout

Routing

Styling

Permissions