41 lines
1.2 KiB
Plaintext
41 lines
1.2 KiB
Plaintext
---
|
|
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"
|
|
/>
|
|
```
|