43 lines
1.3 KiB
Plaintext
43 lines
1.3 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
|
|
---
|
|
|
|
The Button component is a component used to create buttons that can be used to trigger actions or navigate to other pages.
|
|
|
|
## Preview
|
|
|
|
<Button
|
|
text="Learn More"
|
|
href="https://learn.example.com"
|
|
icon="ArrowUpRight"
|
|
size="md"
|
|
target="_blank"
|
|
variation="primary"
|
|
/>
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| ----------- | -------- | -------------- | -------------------------------------------- |
|
|
| `text` | `string` | `""` | The value of text button. |
|
|
| `href` | `string` | `""` | The value of url button. |
|
|
| `icon` | `string` | `null` | The value of button icon render from lucide. |
|
|
| `size` | `string` | `"sm, md, lg"` | The value of size button. |
|
|
| `target` | `string` | `"_blank"` | By default target `_blank` |
|
|
| `variation` | `string` | `"primary"` | By default variation is **Primary** |
|
|
|
|
## Code
|
|
|
|
```bash
|
|
<Button
|
|
text="Learn More"
|
|
href="https://learn.example.com"
|
|
icon="MoveUpRight"
|
|
size="md"
|
|
target="_blank"
|
|
variation="primary"
|
|
/>
|
|
```
|