---
title: Button
description: A component used to create buttons that can be used to trigger actions or navigate to other pages.
date: 14-12-2024
---

## Preview

<Button
  text="Learn More"
  href="https://learn.example.com"
  icon="MoveUpRight"
  size="md"
  target="_blank"
  variation="primary"
/>

## Props

| Prop        | Type     | Default     | Description                                  |
| ----------- | -------- | ----------- | -------------------------------------------- |
| `text`      | string   | undefined   | The button text                              |
| `href`      | string   | **required**| The URL to navigate to                       |
| `icon`      | string   | undefined   | Lucide icon name (e.g. "MoveUpRight")       |
| `size`      | string   | "md"        | Button size: `"sm"`, `"md"`, or `"lg"`      |
| `target`    | string   | undefined   | Link target (e.g. "_blank")                 |
| `variation` | string   | "primary"   | Button style: `"primary"`, `"accent"`, or `"outline"` |

## Output Markdown

```markdown
<Button
  text="Learn More"
  href="https://learn.example.com"
  icon="MoveUpRight"
  size="md"
  target="_blank"
  variation="primary"
/>
```