Button

Buttons can be used to trigger an action or to navigate to a different page.

Buttons can be used to trigger an action or to navigate to a different page.

API Reference

Props

Name	Type	Default	Description
text*	string		The text of the button.
link*	string		The link of the button.
icon	IconEnum		The icon of the button.
primary	boolean		Whether the button is primary (highlighted) or normal.

Examples

Basic

import { Block, Header, Button } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      /* ... */
      <Button text="Get yummy" link="https://cookieandkate.com/thai-spiced-rice-bowls-recipe/" />
    </Block>
  );
}

With icon

import { Block, Header, Button } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      /* ... */
      <Button text="Get yummy" link="https://cookieandkate.com/thai-spiced-rice-bowls-recipe/" icon="ArrowRightOnRectangleIcon" />
    </Block>
  );
}

Primary

import { Block, Header, Button } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      /* ... */
      <Button text="Get yummy" link="https://cookieandkate.com/thai-spiced-rice-bowls-recipe/" primary />
    </Block>
  );
}