Button
Button
component allows users to make an action when the button is pressed.Basic usage
tsxCopied1<Button onClick={() => alert("hi")}>My Button</Button>
Task backed
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.onSuccess
callback or by using the result
field
on the button's component state.tsxCopied1<Button id="petButton" task={{ slug: "pet_cat", onSuccess: (o) => alert(o) }}>2My Button3</Button>
Runbook backed
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.tsxCopied1<Button2id="petButton"3runbook={{4slug: "pet_cat",5params: {6name: "Baosky",7},8onSuccess: () => alert("Runbook succeeded!"),9}}10>11My Button12</Button>
Presets
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.
tsxCopied1<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
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.
tsxCopied1<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">6Secondary Red7</Button>8<Button variant="outline" color="red">9Outline Red10</Button>11<Button compact>Compact</Button>
Confirmation dialog
onClick
or task
) is executed, set the
confirm
prop.Cancel
button, the action will not be executed.tsxCopied1<Button onClick={() => showNotification({ message: "Confirmed!", type: "success" })} confirm>2Confirm3</Button>
tsxCopied1<Button2onClick={() => showNotification({ message: "Confirmed!", type: "success" })}3confirm={{4title: "Do you want to click the button?",5body: "Clicking the button is potentially irreversible",6confirmText: "Yes",7cancelText: "Take me back",8}}9>10Button11</Button>
Disabling
disabled
prop.tsxCopied1<Button onClick={() => alert("hi")} disabled>2My Button3</Button>
Link
href
prop.tsxCopied1<Button href="https://app.airplane.dev">Airplane</Button>
Component API
Button label.
Button color.
Render a slimmer button with less padding.
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.
Button disabled state.
If true, the button will take up the full width of its container.
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
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.
The ID referenced by the global component state.
Whether to left align the button label.
Icon to include on the left side of the button.
Renders a loading indicator when true.
Whether the href URL should open in a new tab.
Callback on click
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.
Button border-radius.
Icon to include on the right side of the button.
slug
to the runbook slug.params
.onSuccess
and onError
callbacks will run on runbook success or failure.refetchTasks
param. See refetchTasks on a mutation for more information.Button size.
task="my_task"
) or an AirplaneFunc
—the return value of airplane.task()
(task={myTask}
).params
.onSuccess
and onError
callbacks will run on task success or failure.refetchTasks
param. See refetchTasks on a mutation for more information.Button type attribute.
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.
State API
The result of the last task that was executed after clicking the button. Only applies for task backed buttons