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.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.
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>
);
}
Prop | Description | Type | Default |
---|---|---|---|
title* | The title displayed for the Action. | string | - |
autoFocus | Indicates whether the Action should be focused automatically when the parent ActionPanel (or Actionpanel.Submenu) opens. | boolean | - |
icon | The icon displayed for the Action. | - | |
shortcut | The keyboard shortcut for the Action. | - | |
style | Defines the visual style of the Action. | ||
onAction | Callback that is triggered when the Action is selected. | () => void | - |
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.
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>
}
/>
);
}
Prop | Description | Type | Default |
---|---|---|---|
content* | The contents that will be copied to the clipboard. | - | |
icon | A optional icon displayed for the Action. | ||
shortcut | The keyboard shortcut for the Action. | - | |
title | An optional title for the Action. | string | "Copy to Clipboard" |
transient | Indicates whether the content should be copied to the clipboard temporarily or not. | boolean | false |
onCopy | Callback when the content was copied to clipboard. | - |
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.
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>
}
/>
);
}
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. | - | |
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 that opens a URL in the default browser.
The main window is closed after the URL is opened in the browser.
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>
}
/>
);
}
Prop | Description | Type | Default |
---|---|---|---|
url* | The URL to open. | string | - |
icon | The icon displayed for the Action. | ||
shortcut | The optional keyboard shortcut for the Action. | - | |
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 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.
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>
}
/>
);
}
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 that pastes the content to the front-most applications.
The main window is closed after the content is pasted to the front-most application.
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>
}
/>
);
}
Prop | Description | Type | Default |
---|---|---|---|
content* | The contents that will be pasted to the frontmost application. | - | |
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. | - |
Action that pushes a new view to the navigation stack.
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 />;
}
Prop | Description | Type | Default |
---|---|---|---|
target* | The target view that will be pushed to the navigation stack. | React.ReactNode | - |
title* | The title displayed for the Action. | 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 that shows a file or folder in the Finder.
The main window is closed after the file or folder is revealed in the Finder.
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>
}
/>
);
}
Prop | Description | Type | Default |
---|---|---|---|
path* | The path to open. | - | |
icon | A optional icon displayed for the Action. | ||
shortcut | The keyboard shortcut for the Action. |