Using 3rd party libraries

TypeLiteral

children

React.ReactNode

color

enum

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

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

grow

Defines height of the element.

The height can be defined in either:
1. Fractional sizes, e.g. 1/2, 1/3, 2/3, etc.
2. Size unit tokens. Each unit is equal to 4px or 0.25rem, e.g. 1u = 4px, 2u = 8px, etc.
3. full for 100% height.
4. auto for height to be determined by the browser.

height

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

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

Defines width of the element.

The width can be defined in either:
1. Fractional sizes, e.g. 1/2, 1/3, 2/3, etc.
2. Size unit tokens. Each unit is equal to 4px or 0.25rem, e.g. 1u = 4px, 2u = 8px, etc.
3. full for 100% width.
4. auto for width to be determined by the browser.

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

direction

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

justify

scroll

spacing

Allow wrapping of the stack items to multiple lines.

wrap

Sets the table columns. If the table is task-backed, this field overrides the
columns inferred from the data.

columns

(keyof TRowData | Column<TRowData>)[]

Callback used to modify the table columns.
@example columnsTransform={(cols) =>
  // Capitalize all the column labels
  cols.map((c) => ({ ...c, label: c.label?.toUpperCase() }))
}

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

A consistent, unique field used to identify a row. This is used to ensure that
row selection is consistent even when the data changes (e.g. when a row is added or deleted).

If not provided, defaults to an "id" field on the row, or the index of the row if there is no id.

rowID

"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

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

The component with which the item is rendered.

ItemComponent

allowDeselect

Whether to automatically focus on the select input.

autoFocus

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.
@deprecated - Use ItemComponent instead.

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.

Sets text-align css property.
@deprecated - Style using `className` or `style` props instead.

React.CSSProperties

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

strikethrough

Sets text-transform css property.
@deprecated - Style using `className` or `style` props instead.

transform

underline

weight

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.

Using 3rd party libraries

Up next

Styling strategies