> For the complete documentation index, see [llms.txt](https://developers.getstage.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.getstage.app/design-system/actions.md).

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