A modal dialog that prompts for user input or confirmation

Dialog

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

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

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

DOMAttributes

onClick

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>.

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

defaultSelectedRows

error

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

hiddenColumns

string[]

The message to display when the table has no data

noData

onRowSelectionChanged

(rows: TRowData[]) => void

outputTransform

(output: TOutput) => TRowData[]

Adds custom components to the end of each row

rowActions

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

rowSelection

selectedRows

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

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

required

searchable

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

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

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

checked

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

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

HTMLAttributes

Whether the checkbox is initially checked.

defaultChecked

Whether the checkbox is initially disabled.

disableMarkdown

italic

The maximum number of lines to clamp to. If set, only this number of lines
will be shown, and the text will appear truncated with a trailing ellipsis.

lineClamp

Controls the font size, weight, margin and line height

strikethrough

transform

underline

weight

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

Text without automatic markdown formatting.

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

icon

Hint text displayed when the input is empty

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

The input's disabled state on initial render

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

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

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

order

The target element. Interacting with this element will launch the tooltip.

This element must be a single element that takes a ref. If you want to place a tooltip on multiple elements
or an element without a ref, set wrap="div".

Whether the tooltip content should be wrapped on to the next line.

If true, set the `width` prop to determine where the content should wrap.

multiline

The tooltip position relative to the children. If not specified, the position will be determined automatically.

position

Wraps the children in a div that fits the height and width of the children.

Use this property if you want to use a tooltip on multiple elements
or an element without a ref.

wrapper

"div"

Allow free text input in addition to picking on a calendar

allowFreeInput

Whether to close the calendar when a date is selected.

closeCalendarOnChange

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

Callback function to determine if day should be disabled

excludeDate

(date: Date) => boolean

Whether the calendar dropdown should be open initially

Called when the date changes. Prefer to use component state to get the value.

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

Callback function that is called when the picker dropdown closes.

onDropdownClose

() => void

Hint text displayed when the picker is empty

Selected date if using this component as a controlled component. Prefer to use the
component state to get the value.

Date

The picker's disabled state on initial render

LinkWithoutRef is exported for documentation purposes.

language

withLineNumbers

Callback for when the form is submitted.

The callback is passed the form's input state as input.

Name	Description	Default
id	string The ID referenced by the global component state
defaultOpened	boolean Whether the dialog is open initially.
opened	boolean Whether the dialog is open.
onClose	() => void Called when the dialog is closed.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl" Dialog body width	md
children	Component Dialog content
radius	"xs" \| "sm" \| "md" \| "lg" \| "xl" Dialog radius	lg
title	Component Dialog title, displayed in header before close button
padding	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" Dialog padding	lg
withCloseButton	boolean Whether the dialog has a close button on the top right.	true
fullScreen	boolean Whether the dialog should take up the entire screen.	true

Name	Description	Default
opened	boolean Whether the dialog is open.
onClose	() => void Called when the dialog is closed.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl" Dialog body width	md
children	Component Dialog content
radius	"xs" \| "sm" \| "md" \| "lg" \| "xl" Dialog radius	lg
title	Component Dialog title, displayed in header before close button
padding	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" Dialog padding	lg
withCloseButton	boolean Whether the dialog has a close button on the top right.	true
fullScreen	boolean Whether the dialog should take up the entire screen.	true
onConfirm	() => void Callback when the dialog is confirmed
cancelText	string Text on the cancel button. An empty string indicates that a cancel button should not be rendered.	Cancel
confirmText	string Text on the Confirm button.	Confirm
id	string The ID referenced by the global component state
defaultOpened	boolean Whether the dialog is open initially.

Name	Description
opened	boolean Whether the dialog is opened
open	() => void Open the dialog
close	() => void Close the dialog

Dialog

Confirmation dialog

Dialog

Component API

Dialog API

Confirmation API

State API