Actions

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

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

<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*	string		The text to be displayed on the button
url*	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:

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*	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:

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*	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:

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