ActionPanel

Section card with headline, body text, and a primary action. Used to surface a single decision or call-to-action.
Export your data
Download everything in this workspace as a ZIP archive.
iOS
Export your data
Download everything in this workspace as a ZIP archive.
Android
Export your data
Download everything in this workspace as a ZIP archive.
Web
tsx
<ActionPanel
title="Export your data"
description="Download everything in this workspace as a ZIP archive."
actionLabel="Export"
/>
The panel's single action fires onAction; wire it to your own handler and every press runs it.

Props

Prop
Description
title
string
The headline: what the action acts on.
description
string
The consequence copy beneath the title: what happens when the action fires.
actionLabel
string
The action button label.
onAction
() => void
Fired when the action button is pressed.
destructive
boolean
Tone (omit for the neutral, primary-action default).
inline
boolean
Layout (pick one; default stacks the action below the copy).
toggle
boolean
Affordance: render the action as an on/off Switch instead of a Button. The panel always lays out inline in this mode.
checked
boolean
The Switch on/off state when `toggle` is set (CONTROLLED). Omit for uncontrolled use.
defaultChecked
boolean
Initial Switch state for uncontrolled use (the toggle flips itself on press).
onToggle
(next: boolean) => void
Fired with the next checked value when the toggle Switch is flipped.
children
ReactNode
Content embedded in the panel between the copy and the action (a block of field rows in a settings panel, say). Stacked, it joins the panel's gap column between the copy and the action; inline and in toggle mode the action is pinned beside the copy, so it renders full width below that row.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

Simple

Don’t
Delete this project
A destructive action with no consequence copy invites accidental, irreversible clicks.
Do
Delete this project
Once you delete a project, there is no going back. Please be certain.
Spell out the consequence above the button so the stakes are clear before the click.

With toggle

Don’t
Two-factor authentication
A bare switch with no description leaves the user guessing what flipping it actually changes.
Do
Two-factor authentication
Add an extra layer of security to your account by requiring a verification code on login.
Pair the switch with a one-line explanation of what turning it on or off does.
← Accordion
Alert →