Button

The Button component allows users to make an action when the button is pressed.

Basic usage

 
tsx
Copied
1
<Button onClick={() => alert("hi")}>My Button</Button>

Task backed
A Button can be backed by an Airplane task by setting the task prop. When it is clicked, it will call the task. The button will show a loader until the task is complete and notify the user on error.
The output of the task can be obtained using the onSuccess callback or by using the result field on the button's component state.
If the user doesn't have permissions to execute the task but can request it, the button will instead trigger a request task dialog. See Permissions handling for details.
tsx
Copied
1
<Button id="petButton" task={{ slug: "pet_cat", onSuccess: (o) => alert(o) }}>
2
  My Button
3
</Button>

Runbook backed
A Button can be backed by an Airplane runbook as well, by setting the runbook prop. When it is clicked, it will call the runbook. Similar to tasks, the button will show a loader until the runbook is complete, and notify the user on error.
Note that unlike tasks, runbooks do not have outputs.
tsx
Copied
1
<Button
2
  id="petButton"
3
  runbook={{
4
    slug: "pet_cat",
5
    params: {
6
      name: "Baosky",
7
    },
8
    onSuccess: () => alert("Runbook succeeded!"),
9
  }}
10
>
11
  My Button
12
</Button>

Presets
The preset prop includes standard options for customizing the look and feel of a button.
  • 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: Supplemental actions that can be done on a page.
  • danger: Actions that delete or do otherwise dangerous actions.
tsx
Copied
1
<Button>Default (primary)</Button>
2
<Button preset="primary">Primary</Button>
3
<Button preset="secondary">Secondary</Button>
4
<Button preset="tertiary">Tertiary</Button>
5
<Button preset="danger">Danger</Button>

Variants and colors
Use variant and color for more fine grained control than a preset. You can also override the variant or color of a preset.

Variants
  • 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.
tsx
Copied
1
<Button variant="filled">Filled</Button>
2
<Button variant="outline">Outline</Button>
3
<Button variant="light">Light</Button>
4
<Button variant="subtle">Subtle</Button>
5
 <Button preset="secondary" color="red">
6
  Secondary Red
7
</Button>
8
<Button variant="outline" color="red">
9
  Outline Red
10
</Button>
11
<Button compact>Compact</Button>

Confirmation dialog
To show a confirmation dialog before the button's action (onClick or task) is executed, set the confirm prop.
If the user clicks the Cancel button, the action will not be executed.
tsx
Copied
1
<Button onClick={() => showNotification({ message: "Confirmed!", type: "success" })} confirm>
2
  Confirm
3
</Button>
The dialog title, body, and buttons can be customized.
tsx
Copied
1
<Button
2
  onClick={() => showNotification({ message: "Confirmed!", type: "success" })}
3
  confirm={{
4
    title: "Do you want to click the button?",
5
    body: "Clicking the button is potentially irreversible",
6
    confirmText: "Yes",
7
    cancelText: "Take me back",
8
  }}
9
>
10
  Button
11
</Button>

Disabling
A Button can be disabled by setting the disabled prop.
tsx
Copied
1
<Button onClick={() => alert("hi")} disabled>
2
  My Button
3
</Button>
A Button can open a URL by setting the href prop.
tsx
Copied
1
<Button href="https://app.airplane.dev">Airplane</Button>

Component API
children
optional
React.ReactNode

Button label.

color
optional
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}`

Button color.

compact
optional
boolean

Render a slimmer button with less padding.

confirm
optional
boolean | { title?: React.ReactNode | string; cancelText?: string; confirmText?: string; body: React.ReactNode | string; }

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.

disabled
optional
boolean

Button disabled state.

fullWidth
optional
boolean

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

grow
optional
boolean

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

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

height
optional
Default
auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
href
optional
string | NavigateParams

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.

id
optional
string

The ID referenced by the global component state.

leftAlign
optional
Default
false
boolean

Whether to left align the button label.

leftIcon
optional
React.ReactNode

Icon to include on the left side of the button.

loading
optional
boolean

Renders a loading indicator when true.

newTab
optional
Default
true
boolean

Whether the href URL should open in a new tab.

onClick
optional
MouseEventHandler<HTMLButtonElement>

Callback on click

preset
optional
Default
primary
"primary" | "secondary" | "tertiary" | "danger"

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.

radius
optional
"xs" | "sm" | "md" | "lg" | "xl"

Button border-radius.

rightIcon
optional
React.ReactNode

Icon to include on the right side of the button.

runbook
optional
string | { slug: string; params?: Record<string, any>; onSuccess?: (sessionID: string) => void; onError?: (error: ExecuteError, sessionID?: string) => void; refetchTasks?: RefetchQuery | RefetchQuery[]; }
The runbook to execute when this button is pressed. If the runbook doesn't require any parameters or special options, you can just pass the runbook slug as a string. Otherwise, create an object with the given params, and set slug to the runbook slug.
If the runbook requires parameters, these can be passed in via params.
The onSuccess and onError callbacks will run on runbook success or failure.
If you want to trigger a refetch of some other task(s) when this runbook completes, set the refetchTasks param. See refetchTasks on a mutation for more information.
size
optional
"xs" | "sm" | "md" | "lg" | "xl"

Button size.

task
optional
string | { slug: string; params?: Record<string, any>; onSuccess?: (output: TOutput, runID: string) => void; onError?: ( output: TOutput | undefined, error: ExecuteError, runID?: string ) => void; refetchTasks?: RefetchQuery | RefetchQuery[]; } | AirplaneFunc | { fn: AirplaneFunc; params?: Record<string, any>; onSuccess?: (output: TOutput, runID: string) => void; onError?: ( output: TOutput | undefined, error: ExecuteError, runID?: string ) => void; refetchTasks?: RefetchQuery | RefetchQuery[]; }
The task to execute when this button is pressed.
If the task doesn't require any parameters or special options, you can just pass the task slug (task="my_task") or an AirplaneFunc—the return value of airplane.task() (task={myTask}).
If the task requires parameters, these can be passed in via params.
The onSuccess and onError callbacks will run on task success or failure.
If you want to trigger a refetch of some other task(s) when this task completes, set the refetchTasks param. See refetchTasks on a mutation for more information.
type
optional
"button" | "submit" | "reset"

Button type attribute.

variant
optional
"filled" | "outline" | "light" | "subtle"

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.

width
optional
Default
auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.

State API
result
{ output?: TOutput; error?: { message?: string; type?: "AIRPLANE_INTERNAL" | "FAILED"; }; runID?: string; }

The result of the last task that was executed after clicking the button. Only applies for task backed buttons

PrivacyTermsSupport