# Button

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

## API Reference

### Props

| Name                                   | Type       | Default | Description                                            |
| -------------------------------------- | ---------- | ------- | ------------------------------------------------------ |
| text<mark style="color:red;">\*</mark> | `string`   |         | The text of the button.                                |
| link<mark style="color:red;">\*</mark> | `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

```tsx
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

```tsx
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

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