ActionPanel

Molecule
Section panel with headline, body text, and one action. Used to surface a single decision or call-to-action.
src/molecules/action-panels
View in Surfaces & data

Playground

Every control sets a real prop of ActionPanelProps. The JSX below updates as you go.
Delete workspace
Removes the workspace for all 24 members. There is no undo.
Props
title
string
description
string
actionLabel
string
destructive
boolean
inline
boolean
toggle
boolean
checked
boolean
JSX · ActionPanelProps
<ActionPanel
title="Delete workspace"
description="Removes the workspace for all 24 members. There is no undo."
actionLabel="Delete"
destructive
inline
/>

Variants

6 examples from src/molecules/action-panels/action-panels.md, each rendered live from its own JSX.
Delete this project
Once you delete a project, there is no going back.
Destructive
<ActionPanel
title="Delete this project"
description="Once you delete a project, there is no going back."
actionLabel="Delete project"
destructive
/>
Weekly digest
A summary of workspace activity, sent every Monday.
Inline
<ActionPanel
title="Weekly digest"
description="A summary of workspace activity, sent every Monday."
actionLabel="Subscribe"
inline
/>
Two-factor authentication
Require a verification code on every login.
Toggle
<ActionPanel
title="Two-factor authentication"
description="Require a verification code on every login."
toggle
/>
Workspace profile
These details appear on every invoice.
Workspace name
Billing email
Embedded fields
<ActionPanel
title="Workspace profile"
description="These details appear on every invoice."
actionLabel="Save changes"
>
<Input label="Workspace name" defaultValue="Northwind" />
<Input label="Billing email" defaultValue="billing@northwind.com" />
</ActionPanel>
Two-factor authentication
Require a verification code on every login.
Recovery phone
Fields under a pinned action
<ActionPanel
title="Two-factor authentication"
description="Require a verification code on every login."
toggle
>
<Input label="Recovery phone" defaultValue="+1 555 0148" />
</ActionPanel>
Delete this project
Once you delete a project, there is no going back.
Confirm before delete
<Stateful initial={false}>
{(open, setOpen) => (
<Container md>
<ActionPanel
title="Delete this project"
description="Once you delete a project, there is no going back."
actionLabel="Delete project"
destructive
onAction={() => setOpen(true)}
/>
<AlertDialog
open={open}
onOpenChange={setOpen}
destructive
title="Delete this project?"
description="This permanently removes the project and its data."
confirmLabel="Delete"
/>
</Container>
)}
</Stateful>

Anatomy

Delete workspace
Removes the workspace for all 24 members. There is no undo.
1
Panel
2
Title
3
Description
4
Action
Dimmed parts appear only in some states or variants.

Props

13 props on ActionPanelProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
4 props
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.
Tone
1 prop
destructive
boolean
false
Layout
pick one
1 prop
inline
boolean
false
Affordance
7 props
toggle
boolean
false
checked
boolean
false
The Switch on/off state when toggle is set (CONTROLLED). Omit for uncontrolled use.
defaultChecked
boolean
false
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 under the copy (a block of field rows in a settings panel, say). The Button then closes the panel on the right, under a hairline, as the action that commits it; a toggle stays pinned beside the copy.
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.

Accessibility and keyboard

Keyboard
Enter
Activates
Space
Activates
Tab
Moves focus on
Semantics
No role of its own in source; it reads as the content it renders.
Below the platform minimum, the touch area grows to 44 pt on iOS and 48 dp on Android without moving the layout.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Weekly digest
A summary of workspace activity, sent every Monday.
Web
control 10 · field 10 · card 16 · Instrument Sans
Weekly digest
A summary of workspace activity, sent every Monday.
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Weekly digest
A summary of workspace activity, sent every Monday.
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

The panel's single action fires onAction; wire it to your own handler and every press runs it.
<ActionPanel
title="Export your data"
description="Download everything in this workspace as a ZIP archive."
actionLabel="Export"
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--bad
--bad-fg
--bad-soft
--bls
--bw
--fd
--ft
--tx2

Related components