Action Panel

Search…
Action Panel
API Reference
ActionPanel
Exposes a list of actions that can be performed by the user.
Often items are context-aware, e.g., based on the selected list item. Actions can be grouped into semantic sections and can have keyboard shortcuts assigned.
The first and second action become the primary and secondary action. They automatically get the default keyboard shortcuts assigned. In List and Detail, this is ↵ for the primary and ⌘ ↵ for the secondary action. In Form it's ⌘ ↵ for the primary and ⌘ ⇧ ↵ for the secondary.
Example
1
import { ActionPanel, Action, List } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <List navigationTitle="Open Pull Requests">
6
      <List.Item
7
        title="Docs: Update API Reference"
8
        subtitle="#1"
9
        actions={
10
          <ActionPanel title="#1 in raycast/extensions">
11
            <Action.OpenInBrowser url="https://github.com/raycast/extensions/pull/1" />
12
            <Action.CopyToClipboard
13
              title="Copy Pull Request URL"
14
              content="https://github.com/raycast/extensions/pull/1"
15
            />
16
          </ActionPanel>
17
        }
18
      />
19
    </List>
20
  );
21
}
Copied!
Props
Prop
Description
Type
Default
children
Sections or Actions. If Action elements are specified, a default section is automatically created.
​ActionPanel.Children​
-
title
The title displayed at the top of the panel
string
-
ActionPanel.Section
A group of visually separated items.
Use sections when the ActionPanel contains a lot of actions to help guide the user to related actions. For example, create a section for all copy actions.
Example
1
import { ActionPanel, Action, List } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <List navigationTitle="Open Pull Requests">
6
      <List.Item
7
        title="Docs: Update API Reference"
8
        subtitle="#1"
9
        actions={
10
          <ActionPanel title="#1 in raycast/extensions">
11
            <ActionPanel.Section title="Copy">
12
              <Action.CopyToClipboard
13
                title="Copy Pull Request Number"
14
                content="#1"
15
              />
16
              <Action.CopyToClipboard
17
                title="Copy Pull Request URL"
18
                content="https://github.com/raycast/extensions/pull/1"
19
              />
20
              <Action.CopyToClipboard
21
                title="Copy Pull Request Title"
22
                content="Docs: Update API Reference"
23
              />
24
            </ActionPanel.Section>
25
            <ActionPanel.Section title="Danger zone">
26
              <Action
27
                title="Close Pull Request"
28
                onAction={() => console.log("Close PR #1")}
29
              />
30
            </ActionPanel.Section>
31
          </ActionPanel>
32
        }
33
      />
34
    </List>
35
  );
36
}
Copied!
Props
Prop
Description
Type
Default
children
The item elements of the section.
​ActionPanel.Section.Children​
-
title
Title displayed above the section
string
-
ActionPanel.Submenu
A very specific action that replaces the current ActionPanel with its children when selected.
This is handy when an action needs to select from a range of options. For example, to add a label to a GitHub pull request or an assignee to a todo.
Example
1
import { ActionPanel, Color, Icon, List } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <List navigationTitle="Open Pull Requests">
6
      <List.Item
7
        title="Docs: Update API Reference"
8
        subtitle="#1"
9
        actions={
10
          <ActionPanel title="#1 in raycast/extensions">
11
            <ActionPanel.Submenu title="Add Label">
12
              <Action
13
                icon={{ source: Icon.Circle, tintColor: Color.Red }}
14
                title="Bug"
15
                onAction={() => console.log("Add bug label")}
16
              />
17
              <Action
18
                icon={{ source: Icon.Circle, tintColor: Color.Yellow }}
19
                title="Enhancement"
20
                onAction={() => console.log("Add enhancement label")}
21
              />
22
              <Action
23
                icon={{ source: Icon.Circle, tintColor: Color.Blue }}
24
                title="Help Wanted"
25
                onAction={() => console.log("Add help wanted label")}
26
              />
27
            </ActionPanel.Submenu>
28
          </ActionPanel>
29
        }
30
      />
31
    </List>
32
  );
33
}
Copied!
Props
Prop
Description
Type
Default
title*
The title displayed for submenu.
string
-
children
Items of the submenu.
​ActionPanel.Submenu.Children​
-
icon
The icon displayed for the submenu.
​Image.ImageLike​
-
shortcut
The keyboard shortcut for the submenu.
​Keyboard.Shortcut​
-
Types
ActionPanel.Children
1
ActionPanel.Children: ActionPanel.Section | ActionPanel.Section[] | ActionPanel.Section.Children | null
Copied!
Supported children for the ActionPanel component.
ActionPanel.Section.Children
1
ActionPanel.Section.Children: Action | Action[] | ReactElement<ActionPanel.Submenu.Props> | ReactElement<ActionPanel.Submenu.Props>[] | null
Copied!
Supported children for the ActionPanel.Section component.
ActionPanel.Submenu.Children
1
ActionPanel.Children: ActionPanel.Section | ActionPanel.Section[] | ActionPanel.Section.Children | null
Copied!
Supported children for the ActionPanel.Submenu component.
API Reference - Previous
User Interface
Actions
Last modified 3d ago
Copy link
Edit on GitHub
Contents
ActionPanel.Section.Children
ActionPanel.Submenu.Children