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>
);
}
Last updated
Was this helpful?