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. | - | |
concealed | Indicates whether the content be treated as confidential. If true , it will not be recorded in the Clipboard History. | boolean | false |
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" |
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. | - | |
title | An optional title for the Action. | string | "Show in Finder" |
onShow | Callback when the file or folder was shown in the Finder. | - |
Action that adds a submit handler for capturing form values.
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>
);
}
Prop | Description | Type | Default |
---|---|---|---|
icon | The icon displayed for the Action. | - | |
shortcut | The keyboard shortcut for the Action. | - | |
title | The title displayed for the Action. | string | "Submit Form" |
onSubmit | Callback when the Form was submitted. The handler receives a the values object containing the user input. | - |
Action that moves a file or folder to the Trash.
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>
}
/>
);
}
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. | - |
Action that navigates to the the Create Snippet command with some or all of the fields prefilled.
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>
}
/>
);
}
Prop | Description | Type | Default |
---|---|---|---|
snippet* | | - | |
icon | - | ||
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.
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>
}
/>
);
}
Prop | Description | Type | Default |
---|---|---|---|
quicklink* | - | ||
icon | - | ||
shortcut | The keyboard shortcut for the Action. | - | |
title | An optional title for the Action. | string | - |
Action that toggles the Quick Look to preview a file.
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>
);
}
Prop | Description | Type | Default |
---|---|---|---|
icon | The icon displayed for the Action. | ||
shortcut | The keyboard shortcut for the Action. | - | |
title | The title for the Action. | string | "Quick Look" |
Action to pick a date.
import { ActionPanel, List, Action } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item
title="Todo"
actions={
<ActionPanel>
<Action.PickDate title="Set Due Date…" />
</ActionPanel>
}
/>
</List>
);
}
Prop | Description | Type | Default |
---|---|---|---|
title* | A title for the Action. | string | - |
onChange* | Callback when the Date was picked | (date: Date) => void | - |
icon | A optional icon displayed for the Action. | ||
max | The maximum date (inclusive) allowed for selection. | Date | - |
min | The minimum date (inclusive) allowed for selection. | Date | - |
shortcut | The keyboard shortcut for the Action. | - | |
type | Indicates what types of date components can be picked | - |
Property | Description | Type |
---|---|---|
text* | The snippet contents. | string |
keyword |