mirror of
https://github.com/Kong/insomnia.git
synced 2026-01-01 18:50:11 -05:00
e43bd82620
* feat: form component
* feat: use twMerge to support class overide
* Spike: Add markdown format doc support for base-components (#9368)
* initial check-in
* add things
* update select.mdx
* use react live things
* add package-json
* Revert "add package-json"
This reverts commit c57abf6178.
* update comment
* update docs
* type fix
* tailwind v4 upgrade
* upgrade tailwind v4 in docusaurus
* feat: add more components (#9426)
* update
* update
---------
Co-authored-by: Kent Wang <kent.wang@konghq.com>
45 lines
1.0 KiB
Plaintext
45 lines
1.0 KiB
Plaintext
---
|
|
id: link
|
|
sidebar_label: 'Link'
|
|
sidebar_position: 1
|
|
---
|
|
|
|
# LearnMoreLink
|
|
|
|
An external link component with an arrow icon that opens in a new tab.
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Required | Description |
|
|
| ----------- | ----------------- | -------- | ---------------------- |
|
|
| `href` | `string` | Yes | URL to navigate to |
|
|
| `children` | `React.ReactNode` | Yes | Link text or content |
|
|
| `className` | `string` | No | Additional CSS classes |
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Link
|
|
|
|
```tsx live
|
|
<LearnMoreLink href="https://docs.insomnia.rest">Learn more about Insomnia</LearnMoreLink>
|
|
```
|
|
|
|
### Custom Styling
|
|
|
|
```tsx live
|
|
<LearnMoreLink className="text-[--color-font]!" href="https://insomnia.rest">
|
|
Visit our website
|
|
</LearnMoreLink>
|
|
```
|
|
|
|
## Styling
|
|
|
|
### CSS Variables
|
|
|
|
The component uses the following CSS variables for theming:
|
|
|
|
- `--color-font`: Link text color
|
|
- `--color-bg`: Link background color
|
|
|
|
You can customize these variables in your CSS to theme the link appearance.
|