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

import { ActionPanel, Action, List } from "@raycast/api";
export default function Command() {
return (
<List navigationTitle="Open Pull Requests">
<List.Item
title="Docs: Update API Reference"
subtitle="#1"
actions={
<ActionPanel title="#1 in raycast/extensions">
<Action.OpenInBrowser url="https://github.com/raycast/extensions/pull/1" />
<Action.CopyToClipboard title="Copy Pull Request Number" content="#1" />
<Action title="Close Pull Request" onAction={() => console.log("Close PR #1")} />
</ActionPanel>
}
/>
</List>
);
}

Props

Prop
Description
Type
Default
title*
The title displayed for the item.
string
-
icon
The icon displayed for the action.
-
shortcut
The keyboard shortcut for the item.
-
style
Defines the visual style of the Action.
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

import { ActionPanel, Action, Detail } from "@raycast/api";
export default function Command() {
return (
<Detail
markdown="Press `⌘ + .` and share some love."
actions={
<ActionPanel>
<Action.CopyToClipboard content="I ❤️ Raycast" shortcut={{ modifiers: ["cmd"], key: "." }} />
</ActionPanel>
}
/>
);
}

Props

Prop
Description
Type
Default
content*
The contents that will be written to the clipboard as string.
string or number
-
icon
A optional icon displayed for the item.
shortcut
The keyboard shortcut for the action.
-
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

import { ActionPanel, Detail, Action } from "@raycast/api";
export default function Command() {
return (
<Detail
markdown="Check out your extension code."
actions={
<ActionPanel>
<Action.Open title="Open Folder" target={__dirname} />
</ActionPanel>
}
/>
);
}

Props

Prop
Description
Type
Default
target*
The file, folder or URL to open.
string
-
title*
The title for the action.
string
-
application
The application name to use for opening the file.
string or Application
-
icon
The icon displayed for the action.
shortcut
The keyboard shortcut for the action.
-
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

import { ActionPanel, Detail, Action } from "@raycast/api";
export default function Command() {
return (
<Detail
markdown="Join the gang!"
actions={
<ActionPanel>
<Action.OpenInBrowser url="https://raycast.com/jobs" />
</ActionPanel>
}
/>
);
}

Props

Prop
Description
Type
Default
url*
The URL to open.
string
-
icon
The icon displayed for the action.
shortcut
The optional keyboard shortcut for the menu item
-
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

import { ActionPanel, Detail, Action } from "@raycast/api";
import { homedir } from "os";
const DESKTOP_DIR = `${homedir()}/Desktop`;
export default function Command() {
return (
<Detail
markdown="What do you want to use to open your desktop with?"
actions={
<ActionPanel>
<Action.OpenWith path={DESKTOP_DIR} />
</ActionPanel>
}
/>
);
}

Props

Prop
Description
Type
Default
path*
The path to open.
string
-
icon
The icon displayed for the action.
shortcut
The keyboard shortcut for the action.
-
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

import { ActionPanel, Detail, Action } from "@raycast/api";
export default function Command() {
return (
<Detail
markdown="Let us know what you think about the Raycast API?"
actions={
<ActionPanel>
<Action.Paste content="[email protected]" />
</ActionPanel>
}
/>
);
}

Props

Prop
Description
Type
Default
content*
The contents that will be written to the clipboard as string.
string or number
-
icon
The icon displayed for the action.
shortcut
The keyboard shortcut for the action.
-
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

import { ActionPanel, Detail, Action } from "@raycast/api";
function Ping() {
return (
<Detail
markdown="Ping"
actions={
<ActionPanel>
<Action.Push title="Push Pong" target={<Pong />} />
</ActionPanel>
}
/>
);
}
function Pong() {
return <Detail markdown="Pong" />;
}
export default function Command() {
return <Ping />;
}

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
-
icon
The icon displayed for the action.
-
shortcut
The keyboard shortcut for the action.
-
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

import { ActionPanel, Detail, Action } from "@raycast/api";
import { homedir } from "os";
const DOWNLOADS_DIR = `${homedir()}/Downloads`;
export default function Command() {
return (
<Detail
markdown="Are your downloads pilling up again?"
actions={
<ActionPanel>
<Action.ShowInFinder path={DOWNLOADS_DIR} />
</ActionPanel>
}
/>
);
}

Props

Prop
Description
Type
Default
path*
The path to open.
PathLike
-
icon
A optional icon displayed for the item.
shortcut
The keyboard shortcut for the action.
-
title
An optional title for the action.
string
"Show in Finder"
onShow
Callback when the file or folder was shown in the Finder.
(path: PathLike) => void
-

Action.SubmitForm

Action that adds a submit handler for capturing form values.

Example

import { ActionPanel, Form, Action } from "@raycast/api";
export default function Command() {
return (
<Form
actions={
<ActionPanel>
<Action.SubmitForm title="Submit Answer" onSubmit={(values) => console.log(values)} />
</ActionPanel>
}
>
<Form.Checkbox id="answer" label="Are you happy?" defaultValue={true} />
</Form>
);
}

Props

Prop
Description
Type
Default
icon
The icon displayed for the action.
-
shortcut
The keyboard shortcut for the action.
-
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.
(input: Form.Values) => boolean | void | Promise<boolean | void>
-

Action.Trash

Action that moves a file or folder to the Trash.

Example

import { ActionPanel, Detail, Action } from "@raycast/api";
import { homedir } from "os";
const FILE = `${homedir()}/Downloads/get-rid-of-me.txt`;
export default function Command() {
return (
<Detail
markdown="Some spring cleaning?"
actions={
<ActionPanel>
<Action.Trash paths={FILE} />
</ActionPanel>
}
/>
);
}

Props

Prop
Description
Type
Default
paths*
The item or items to move to the trash.
-
icon
A optional icon displayed for the action.
shortcut
The optional keyboard shortcut for the action.
-
title
An optional title for the action.
string
"Move to Trash"
onTrash
Callback when all items were moved to the trash.
(paths: PathLike | PathLike[]) => void
-

Action.CreateSnippet

Action that navigates to the the Create Snippet command with some or all of the fields prefilled.

Example

import { ActionPanel, Detail, Action } from "@raycast/api";
export default function Command() {
return (
<Detail
markdown="Test out snippet creation"
actions={
<ActionPanel>
<Action.CreateSnippet snippet={{ text: "DE75512108001245126199" }} />
</ActionPanel>
}
/>
);
}

Props

Prop
Description
Type
Default
snippet*
Snippet
-
icon
A optional icon displayed for the item. See Image.ImageLike for the supported formats and types.
-
shortcut
The keyboard shortcut for the action.
-
title
An optional title for the action.
string
-
Action that navigates to the the Create Quicklink command with some or all of the fields prefilled.

Example

import { ActionPanel, Detail, Action } from "@raycast/api";
export default function Command() {
return (
<Detail
markdown="Test out quicklink creation"
actions={
<ActionPanel>
<Action.CreateQuicklink quicklink={{ link: "https://duckduckgo.com/?q={Query}" }} />
</ActionPanel>
}
/>
);
}

Props

Prop
Description
Type
Default
quicklink*
The Quicklink to create.
Quicklink
-
icon
A optional icon displayed for the item. See Image.ImageLike for the supported formats and types.
-
shortcut
The keyboard shortcut for the action.
-
title
An optional title for the action.
string
-

Action.ToggleQuickLook

Action that toggles the Quick Look to preview a file.

Example

import { ActionPanel, List, Action } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item
title="Preview me"
quickLook={{ path: "~/Downloads/Raycast.dmg", name: "Some file" }}
actions={
<ActionPanel>
<Action.ToggleQuickLook shortcut={{ modifiers: ["cmd"], key: "y" }} />
</ActionPanel>
}
/>
</List>
);
}

Props

Prop
Description
Type
Default
icon
The icon displayed for the action.
Icon.Eye
shortcut
The keyboard shortcut for the action.
-
title
The title for the action.
string
"Quick Look"

Types

Snippet

Properties

Property
Description
Type
text*
The snippet contents.
string
keyword
The keyword to trigger the snippet.
string
name
The snippet name.
string

Properties

Property
Description
Type
link*
The URL or file path, optionally including placeholders such as in "https://google.com/search?q={Query}"
string
application
The application that the quicklink should be opened in.
string or Application
name
The quicklink name
string

Action.Style

Defines the visual style of the Action.
Use Action.Style.Regular for displaying a regular actions. Use Action.Style.Destructive when your action has something that user should be careful about. Use the confirmation Alert if the action is doing something that user cannot revert.
Last modified 1mo ago
Copy link
Edit on GitHub
On this page
API Reference
Action
Action.CopyToClipboard
Action.Open
Action.OpenInBrowser
Action.OpenWith
Action.Paste
Action.Push
Action.ShowInFinder
Action.SubmitForm
Action.Trash
Action.CreateSnippet
Action.CreateQuicklink
Action.ToggleQuickLook
Types
Snippet
Quicklink
Action.Style