# Actions

Actions are used to create one or more actions for a supported component.

## API Reference

### Props

### ActionsProps

ActionsProps is an interface that represents the possible actions that can be taken on an element. It has three optional properties:

| Name   | Type        | Default | Description                                                    |
| ------ | ----------- | ------- | -------------------------------------------------------------- |
| button | ButtonProps |         | An object representing a button action                         |
| link   | LinkProps   |         | An object representing a link action                           |
| open   | OpenProps   |         | An object representing an action to open a URL in a new window |

Each of these properties represents a different type of action that can be taken on an element. The button property represents a button action, the link property represents a link action, and the open property represents an action to open a URL in a new window. All of these properties are optional, so an element can have none, one, or multiple actions associated with it.

#### Example

```tsx
<Component actions={
  {
    /* For example in a card */
    button: {
      text: "Show more",
      primary: true,
      icon: "GlobeAltIcon",
      url: "https://getstage.app"
    },
    /* Usage in a Block */
    link: {
      url: "https://stagehq.com"
    },
    /* On a List Item / Card Item */
    open: {
      url: "https://getstage.app"
    }
  }
}>
```

### ButtonProps

| Name                                   | Type     | Default | Description                                                              |
| -------------------------------------- | -------- | ------- | ------------------------------------------------------------------------ |
| primary                                | boolean  |         | A boolean value indicating whether the button is a primary button or not |
| icon                                   | IconEnum |         | A value representing the icon to be displayed on the button              |
| text<mark style="color:red;">\*</mark> | string   |         | The text to be displayed on the button                                   |
| url<mark style="color:red;">\*</mark>  | string   |         | The URL to be opened when the button is clicked                          |

#### Example

If you want to have a `Block` with a `Cards` list and buttons on the `Card.Item`, you have to specify it like this:

```tsx
import { Block, List } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block
      title="Title"
      imagePath="https://source.unsplash.com/random/400x200"
      size={2}
      actions={{
        link: {
          url: "https://stagehq.com",
        },
      }}
    >
      <Cards>
        <Card.Item
          title="Project 1"
          subtitle="Subtitle"
          icon="PlayIcon"
          actions={{ button: { text: "Show more", url: "https://getstage.app" }}}
          }
        />
        /* ... */
      </Cards>
    </Block>
  );
}
```

### LinkProps

| Name                                  | Type   | Default | Description                                   |
| ------------------------------------- | ------ | ------- | --------------------------------------------- |
| url<mark style="color:red;">\*</mark> | string |         | The URL to be opened when the link is clicked |

#### Example

If you want to have a `Block` with a link next to it, you have to specify it like this:

```tsx
import { Block, List } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block
      title="Title"
      imagePath="https://source.unsplash.com/random/400x200"
      size={2}
      actions={{
        link: {
          url: "https://stagehq.com",
        },
      }}
    >
      /* children */
    </Block>
  );
}
```

### OpenProps

| Name                                  | Type   | Default | Description                          |
| ------------------------------------- | ------ | ------- | ------------------------------------ |
| url<mark style="color:red;">\*</mark> | string |         | The URL to be opened in a new window |

#### Example

If you want to have a `Block` with a `List` and open actions, you have to specify it like this:

```tsx
import { Block, List } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block
      title="Title"
      imagePath="https://source.unsplash.com/random/400x200"
      size={2}
      actions={{
        link: {
          url: "https://stagehq.com",
        },
      }}
    >
      <List>
        <List.Item type="text" title="Item 1" subtitle="This is a subtitle" actions={{open: {url: "https://stagehq.com"}}}/>
        /* ... */
      </List>
    </Block>
  );
}
```


---

# 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.getstage.app/design-system/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.