Back to Insomnia

LearnMoreLink

packages/insomnia-component-docs/docs/Components/link.mdx

7.1.1995 B
Original Source

LearnMoreLink

An external link component with an arrow icon that opens in a new tab.

Props

PropTypeRequiredDescription
hrefstringYesURL to navigate to
childrenReact.ReactNodeYesLink text or content
classNamestringNoAdditional CSS classes

Usage Examples

tsx
<LearnMoreLink href="https://docs.insomnia.rest">Learn more about Insomnia</LearnMoreLink>

Custom Styling

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