Basics
API Reference
Actions
Our API includes a few built-in actions that can be used for common interactions, such as opening a link or copying some content to the clipboard. By using them, you make sure to follow our human interface guidelines. If you need something custom, use the
Action component. All built-in actions are just abstractions on top of it.API Reference
Action
A context-specific action that can be performed by the user.
Assign keyboard shortcuts to items to make it easier for users to perform frequently used 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
<Action.OpenInBrowser url="https://github.com/raycast/extensions/pull/1" />
12
<Action.CopyToClipboard
13
title="Copy Pull Request Number"
14
content="#1"
15
/>
16
<Action
17
title="Close Pull Request"
18
onAction={() => console.log("Close PR #1")}
19
/>
20
</ActionPanel>
21
}
22
/>
23
</List>
24
);
25
}
Copied!
Props
Prop
Description
Type
Default
title*
The title displayed for the item.
string-
onAction
Callback that is triggered when the item is selected.
() => void-
Action.CopyToClipboard
Action that copies the content to the clipboard.
The main window is closed, and a HUD is shown after the content was copied to the clipboard.
Example
1
import { ActionPanel, Action, Detail } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<Detail
6
markdown="Press `⌘ + .` and share some love."
7
actions={
8
<ActionPanel>
9
<Action.CopyToClipboard
10
content="I ❤️ Raycast"
11
shortcut={{ modifiers: ["cmd"], key: "." }}
12
/>
13
</ActionPanel>
14
}
15
/>
16
);
17
}
Copied!
Props
Prop
Description
Type
Default
content*
The contents that will be written to the clipboard as string.
string or number-
title
An optional title for the action.
string"Copy to Clipboard"onCopy
Callback when the content was copied to clipboard.
(content: string | number) => void-
Action.Open
An action to open a file or folder with a specific application, just as if you had double-clicked the file's icon.
The main window is closed after the file is opened.
Example
1
import { ActionPanel, Detail, Action } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<Detail
6
markdown="Check out your extension code."
7
actions={
8
<ActionPanel>
9
<Action.Open title="Open Folder" target={__dirname} />
10
</ActionPanel>
11
}
12
/>
13
);
14
}
Copied!
Props
Prop
Description
Type
Default
target*
The file, folder or URL to open.
string-
title*
The title for the action.
string-
onOpen
Callback when the file or folder was opened.
(target: string) => void-
Action.OpenInBrowser
Action that opens a URL in the default browser.
The main window is closed after the URL is opened in the browser.
Example
1
import { ActionPanel, Detail, Action } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<Detail
6
markdown="Join the gang!"
7
actions={
8
<ActionPanel>
9
<Action.OpenInBrowser url="https://raycast.com/jobs" />
10
</ActionPanel>
11
}
12
/>
13
);
14
}
Copied!
Props
Prop
Description
Type
Default
url*
The URL to open.
string-
title
An optional title for the action.
string"Open in Browser"onOpen
Callback when the URL was opened in the browser.
(url: string) => void-
Action.OpenWith
Action that opens a file or folder with a specific application.
The action opens a sub-menu with all applications that can open the file or folder. The main window is closed after the file is opened in the specified application.
Example
1
import { ActionPanel, Detail, Action } from "@raycast/api";
2
import { homedir } from "os";
3
4
const DESKTOP_DIR = `${homedir()}/Desktop`;
5
6
export default function Command() {
7
return (
8
<Detail
9
markdown="What do you want to use to open your desktop with?"
10
actions={
11
<ActionPanel>
12
<Action.OpenWith path={DESKTOP_DIR} />
13
</ActionPanel>
14
}
15
/>
16
);
17
}
Copied!
Props
Prop
Description
Type
Default
path*
The path to open.
string-
title
The title for the action.
string"Open With"onOpen
Callback when the file or folder was opened.
(path: string) => void-
Action.Paste
Action that pastes the content to the front-most applications.
The main window is closed after the content is pasted to the front-most application.
Example
1
import { ActionPanel, Detail, Action } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<Detail
6
markdown="Let us know what you think about the Raycast API?"
7
actions={
8
<ActionPanel>
9
<Action.Paste content="[email protected]" />
10
</ActionPanel>
11
}
12
/>
13
);
14
}
Copied!
Props
Prop
Description
Type
Default
content*
The contents that will be written to the clipboard as string.
string or number-
title
An optional title for the action.
string"Paste in Active app"onPaste
Callback when the content was pasted into the front-most application.
(content: string | number) => void-
Action.Push
Action that pushes a new view to the navigation stack.
Example
1
import { ActionPanel, Detail, Action } from "@raycast/api";
2
3
function Ping() {
4
return (
5
<Detail
6
markdown="Ping"
7
actions={
8
<ActionPanel>
9
<Action.Push title="Push Pong" target={<Pong />} />
10
</ActionPanel>
11
}
12
/>
13
);
14
}
15
16
function Pong() {
17
return <Detail markdown="Pong" />;
18
}
19
20
export default function Command() {
21
return <Ping />;
22
}
Copied!
Props
Prop
Description
Type
Default
target*
The target view that will be pushed to the navigation stack.
React.ReactNode-
title*
The title displayed for the item.
string-
onPush
Callback when the target view was pushed.
() => void-
Action.ShowInFinder
Action that shows a file or folder in the Finder.
The main window is closed after the file or folder is revealed in the Finder.
Example
1
import { ActionPanel, Detail, Action } from "@raycast/api";
2
import { homedir } from "os";
3
4
const DOWNLOADS_DIR = `${homedir()}/Downloads`;
5
6
export default function Command() {
7
return (
8
<Detail
9
markdown="Are your downloads pilling up again?"
10
actions={
11
<ActionPanel>
12
<Action.ShowInFinder path={DOWNLOADS_DIR} />
13
</ActionPanel>
14
}
15
/>
16
);
17
}
Copied!
Props
Prop
Description
Type
Default
title
An optional title for the action.
string"Show in Finder"Action.SubmitForm
Action that adds a submit handler for capturing form values.
Example
1
import { ActionPanel, Form, Action } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<Form
6
actions={
7
<ActionPanel>
8
<Action.SubmitForm
9
title="Submit Answer"
10
onSubmit={(values) => console.log(values)}
11
/>
12
</ActionPanel>
13
}
14
>
15
<Form.Checkbox id="answer" label="Are you happy?" defaultValue={true} />
16
</Form>
17
);
18
}
Copied!
Props
Prop
Description
Type
Default
title
The title displayed for the item.
string"Submit Form"onSubmit
Callback that is triggered when the submit was submitted. Use the handler to perform custom validation logic and call other Raycast API methods. The handler receives a the values object containing the user input.
-
Action.Trash
Action that moves a file or folder to the Trash.
Example
1
import { ActionPanel, Detail, Action } from "@raycast/api";
2
import { homedir } from "os";
3
4
const FILE = `${homedir()}/Downloads/get-rid-of-me.txt`;
5
6
export default function Command() {
7
return (
8
<Detail
9
markdown="Some spring cleaning?"
10
actions={
11
<ActionPanel>
12
<Action.Trash paths={FILE} />
13
</ActionPanel>
14
}
15
/>
16
);
17
}
Copied!
Props
Prop
Description
Type
Default
title
An optional title for the action.
string"Move to Trash"Action.CreateSnippet
Action that navigates to the the Create Snippet command with some or all of the fields prefilled.
Example
1
import { ActionPanel, Detail, Action } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<Detail
6
markdown="Test out snippet creation"
7
actions={
8
<ActionPanel>
9
<Action.CreateSnippet snippet={{ text: "DE75512108001245126199" }} />
10
</ActionPanel>
11
}
12
/>
13
);
14
}
Copied!
Props
Prop
Description
Type
Default
icon
-
title
An optional title for the action.
string-
Action.CreateQuicklink
Action that navigates to the the Create Quicklink command with some or all of the fields prefilled.
Example
1
import { ActionPanel, Detail, Action } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<Detail
6
markdown="Test out quicklink creation"
7
actions={
8
<ActionPanel>
9
<Action.CreateQuicklink
10
quicklink={{ link: "https://duckduckgo.com/?q={Query}" }}
11
/>
12
</ActionPanel>
13
}
14
/>
15
);
16
}
Copied!
Props
Prop
Description
Type
Default
icon
-
title
An optional title for the action.
string-
Types
Snippet
Properties
Property
Description
Type
text*
The snippet contents.
stringkeyword
The keyword to trigger the snippet.
stringname
The snippet name.
stringQuicklink
Properties
Property
Description
Type
link*
The URL or file path, optionally including placeholders such as in "https://google.com/search?q={Query}"
stringname
The quicklink name
stringLast modified 3d ago