# 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`](#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

```typescript
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<mark style="color:red;">\*</mark> | 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.                                                                                       | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike) | -       |
| onAction                                | Callback that is triggered when the Action is selected.                                                                  | `() => void`                                                                                       | -       |
| shortcut                                | The keyboard shortcut for the Action.                                                                                    | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                   | -       |
| style                                   | Defines the visual style of the Action.                                                                                  | [`Alert.ActionStyle`](https://developers.raycast.com/feedback/alert#alert.actionstyle)             | -       |

### 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

```typescript
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<mark style="color:red;">\*</mark> | The contents that will be copied to the clipboard.                                                                     | `string` or `number` or [`Clipboard.Content`](https://developers.raycast.com/clipboard#clipboard.content)                    | -       |
| concealed                                 | Indicates whether the content be treated as confidential. If `true`, it will not be recorded in the Clipboard History. | `boolean`                                                                                                                    | -       |
| icon                                      | A optional icon displayed for the Action.                                                                              | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike)                           | -       |
| onCopy                                    | Callback when the content was copied to clipboard.                                                                     | `(content: string \| number \|` [`Clipboard.Content`](https://developers.raycast.com/clipboard#clipboard.content)`) => void` | -       |
| shortcut                                  | The keyboard shortcut for the Action.                                                                                  | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                                             | -       |
| title                                     | An optional title for the Action.                                                                                      | `string`                                                                                                                     | -       |

### 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

```typescript
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<mark style="color:red;">\*</mark> | The file, folder or URL to open.                  | `string`                                                                                           | -       |
| title<mark style="color:red;">\*</mark>  | The title for the Action.                         | `string`                                                                                           | -       |
| application                              | The application name to use for opening the file. | `string` or [`Application`](https://developers.raycast.com/utilities#application)                  | -       |
| icon                                     | The icon displayed for the Action.                | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike) | -       |
| onOpen                                   | Callback when the file or folder was opened.      | `(target: string) => void`                                                                         | -       |
| shortcut                                 | The keyboard shortcut for the Action.             | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                   | -       |

### 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

```typescript
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<mark style="color:red;">\*</mark> | The URL to open.                                 | `string`                                                                                           | -       |
| icon                                  | The icon displayed for the Action.               | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike) | -       |
| onOpen                                | Callback when the URL was opened in the browser. | `(url: string) => void`                                                                            | -       |
| shortcut                              | The optional keyboard shortcut for the Action.   | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                   | -       |
| title                                 | An optional title for the Action.                | `string`                                                                                           | -       |

### Action.OpenWith

Action that opens a file or URL with a specific application.

The action opens a sub-menu with all applications that can open the file or URL. The main window is closed after the item is opened in the specified application.

#### Example

```typescript
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<mark style="color:red;">\*</mark> | The path to open.                            | `string`                                                                                           | -       |
| icon                                   | The icon displayed for the Action.           | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike) | -       |
| onOpen                                 | Callback when the file or folder was opened. | `(path: string) => void`                                                                           | -       |
| shortcut                               | The keyboard shortcut for the Action.        | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                   | -       |
| title                                  | The title for the Action.                    | `string`                                                                                           | -       |

### 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

```typescript
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="api@raycast.com" />
        </ActionPanel>
      }
    />
  );
}
```

#### Props

| Prop                                      | Description                                                           | Type                                                                                                                         | Default |
| ----------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------- |
| content<mark style="color:red;">\*</mark> | The contents that will be pasted to the frontmost application.        | `string` or `number` or [`Clipboard.Content`](https://developers.raycast.com/clipboard#clipboard.content)                    | -       |
| icon                                      | The icon displayed for the Action.                                    | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike)                           | -       |
| onPaste                                   | Callback when the content was pasted into the front-most application. | `(content: string \| number \|` [`Clipboard.Content`](https://developers.raycast.com/clipboard#clipboard.content)`) => void` | -       |
| shortcut                                  | The keyboard shortcut for the Action.                                 | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                                             | -       |
| title                                     | An optional title for the Action.                                     | `string`                                                                                                                     | -       |

### Action.Push

Action that pushes a new view to the navigation stack.

#### Example

```typescript
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<mark style="color:red;">\*</mark> | The target view that will be pushed to the navigation stack. | `React.ReactNode`                                                                                  | -       |
| title<mark style="color:red;">\*</mark>  | The title displayed for the Action.                          | `string`                                                                                           | -       |
| icon                                     | The icon displayed for the Action.                           | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike) | -       |
| onPop                                    | Callback when the target view will be popped.                | `() => void`                                                                                       | -       |
| onPush                                   | Callback when the target view was pushed.                    | `() => void`                                                                                       | -       |
| shortcut                                 | The keyboard shortcut for the Action.                        | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                   | -       |

### 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

```typescript
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<mark style="color:red;">\*</mark> | The path to open.                                         | `"fs".PathLike`                                                                                    | -       |
| icon                                   | A optional icon displayed for the Action.                 | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike) | -       |
| onShow                                 | Callback when the file or folder was shown in the Finder. | `(path: "fs".PathLike) => void`                                                                    | -       |
| shortcut                               | The keyboard shortcut for the Action.                     | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                   | -       |
| title                                  | An optional title for the Action.                         | `string`                                                                                           | -       |

### Action.SubmitForm

Action that adds a submit handler for capturing form values.

#### Example

```typescript
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.                                                                        | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike)                                         | -       |
| onSubmit | Callback when the Form was submitted. The handler receives a the values object containing the user input. | `(input:` [`Form.Values`](https://developers.raycast.com/api-reference/form#form.values)`) => boolean \| void \| Promise<boolean \| void>` | -       |
| shortcut | The keyboard shortcut for the Action.                                                                     | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                                                           | -       |
| style    | Defines the visual style of the Action.                                                                   | [`Alert.ActionStyle`](https://developers.raycast.com/feedback/alert#alert.actionstyle)                                                     | -       |
| title    | The title displayed for the Action.                                                                       | `string`                                                                                                                                   | -       |

### Action.Trash

Action that moves a file or folder to the Trash.

#### Example

```typescript
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<mark style="color:red;">\*</mark> | The item or items to move to the trash.          | `"fs".PathLike` or `"fs".PathLike[]`                                                               | -       |
| icon                                    | A optional icon displayed for the Action.        | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike) | -       |
| onTrash                                 | Callback when all items were moved to the trash. | `(paths: "fs".PathLike \| "fs".PathLike[]) => void`                                                | -       |
| shortcut                                | The optional keyboard shortcut for the Action.   | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                   | -       |
| title                                   | An optional title for the Action.                | `string`                                                                                           | -       |

### Action.CreateSnippet

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

#### Example

```typescript
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<mark style="color:red;">\*</mark> |                                                                                                    | [`Snippet`](#snippet)                                                                              | -       |
| icon                                      | A optional icon displayed for the Action. See Image.ImageLike for the supported formats and types. | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike) | -       |
| shortcut                                  | The keyboard shortcut for the Action.                                                              | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                   | -       |
| 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

```typescript
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<mark style="color:red;">\*</mark> | The Quicklink to create.                                                                           | [`Quicklink`](#quicklink)                                                                          | -       |
| icon                                        | A optional icon displayed for the Action. See Image.ImageLike for the supported formats and types. | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike) | -       |
| shortcut                                    | The keyboard shortcut for the Action.                                                              | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                   | -       |
| title                                       | An optional title for the Action.                                                                  | `string`                                                                                           | -       |

### Action.ToggleQuickLook

Action that toggles the Quick Look to preview a file.

#### Example

```typescript
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 />
          </ActionPanel>
        }
      />
    </List>
  );
}
```

#### Props

| Prop     | Description                           | Type                                                                                               | Default |
| -------- | ------------------------------------- | -------------------------------------------------------------------------------------------------- | ------- |
| icon     | The icon displayed for the Action.    | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike) | -       |
| shortcut | The keyboard shortcut for the Action. | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                   | -       |
| title    | The title for the Action.             | `string`                                                                                           | -       |

### Action.PickDate

Action to pick a date.

#### Example

```typescript
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>
  );
}
```

#### Props

| Prop                                       | Description                                                                                                                                                                                                                                                                                                                                                    | Type                                                                                                                | Default |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------- |
| onChange<mark style="color:red;">\*</mark> | Callback when the Date was picked                                                                                                                                                                                                                                                                                                                              | `(date:` [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)`) => void` | -       |
| title<mark style="color:red;">\*</mark>    | A title for the Action.                                                                                                                                                                                                                                                                                                                                        | `string`                                                                                                            | -       |
| icon                                       | A optional icon displayed for the Action.                                                                                                                                                                                                                                                                                                                      | [`Image.ImageLike`](https://developers.raycast.com/api-reference/icons-and-images#image.imagelike)                  | -       |
| max                                        | The maximum date (inclusive) allowed for selection. - If the PickDate type is `Type.Date`, only the full day date will be considered for comparison, ignoring the time components of the Date object. - If the PickDate type is `Type.DateTime`, both date and time components will be considered for comparison. The date should be a JavaScript Date object. | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)                     | -       |
| min                                        | The minimum date (inclusive) allowed for selection. - If the PickDate type is `Type.Date`, only the full day date will be considered for comparison, ignoring the time components of the Date object. - If the PickDate type is `Type.DateTime`, both date and time components will be considered for comparison. The date should be a JavaScript Date object. | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)                     | -       |
| shortcut                                   | The keyboard shortcut for the Action.                                                                                                                                                                                                                                                                                                                          | [`Keyboard.Shortcut`](https://developers.raycast.com/keyboard#keyboard.shortcut)                                    | -       |
| type                                       | Indicates what types of date components can be picked Defaults to Action.PickDate.Type.DateTime                                                                                                                                                                                                                                                                | [`Action.PickDate.Type`](#action.pickdate.type)                                                                     | -       |

## Types

### Snippet

#### Properties

| Property                               | Description                         | Type     |
| -------------------------------------- | ----------------------------------- | -------- |
| text<mark style="color:red;">\*</mark> | The snippet contents.               | `string` |
| keyword                                | The keyword to trigger the snippet. | `string` |
| name                                   | The snippet name.                   | `string` |

### Quicklink

#### Properties

| Property                               | Description                                                                                                | Type                                                                              |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| link<mark style="color:red;">\*</mark> | 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`](https://developers.raycast.com/utilities#application) |
| icon                                   | The icon to display for the quicklink.                                                                     | [`Icon`](https://developers.raycast.com/api-reference/icons-and-images#icon)      |
| name                                   | The quicklink name                                                                                         | `string`                                                                          |

### Action.Style

Defines the visual style of the Action.

Use [Action.Style.Regular](#action.style) for displaying a regular actions. Use [Action.Style.Destructive](#action.style) when your action has something that user should be careful about. Use the confirmation [Alert](https://developers.raycast.com/api-reference/feedback/alert) if the action is doing something that user cannot revert.

### Action.PickDate.Type

The types of date components the user can pick with an `Action.PickDate`.

#### Enumeration members

| Name     | Description                                                      |
| -------- | ---------------------------------------------------------------- |
| DateTime | Hour and second can be picked in addition to year, month and day |
| Date     | Only year, month, and day can be picked                          |

### Action.PickDate.isFullDay

A method that determines if a given date represents a full day or a specific time.

```tsx
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…"
              onChange={(date) => {
                if (Action.PickDate.isFullDay(values.reminderDate)) {
                  // the event is for a full day
                } else {
                  // the event is at a specific time
                }
              }}
            />
          </ActionPanel>
        }
      />
    </List>
  );
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.raycast.com/api-reference/user-interface/actions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.