Qwik link - Flowbite

The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card

Get started with the link component to enable hyperlinks across pages and external websites applied to elements such as inline text, buttons, cards, inside paragraphs, and more.

Hyperlinks are a great way to reduce bounce rate of the current page and encourage visitors to browse your website and become a returning user.

To start using the component make sure that you have imported it from Flowbite Qwik:

import { Link } from "flowbite-qwik"

Default link

Use this example to set default styles to an inline link element.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Link } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="text-center">
      <Link href="#">Read more</Link>
    </div>
  )
})

Button

This example can be used to set a hyperlink on a button component.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Link } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="text-center">
      <Link href="#" tag="button">
        Read more
      </Link>
    </div>
  )
})

Paragraph

Use this example to set a link inside a paragraph with an underline style.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Link } from 'flowbite-qwik'

export default component$(() => {
  return (
    <p class="text-gray-500 dark:text-gray-400">
      The free updates that will be provided is based on the{' '}
      <Link href="#" underline>
        roadmap
      </Link>{' '}
      that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well.
    </p>
  )
})

Icon link

This example can be used to set a custom icon inside the hyperlink element.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Link } from 'flowbite-qwik'
import { IconAngleLeftOutline, IconAngleRightOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <>
      <p class="text-gray-500 dark:text-gray-400">
        500,000 people & companies have made over a million apps with Glide.{' '}
        <Link href="#" iconRight={IconAngleRightOutline}>
          Read their stories
        </Link>
      </p>
      <p>
        <Link href="#" iconLeft={IconAngleLeftOutline}>
          Back to the future
        </Link>
      </p>
    </>
  )
})

CTA link

Use this example to set a hyperlink on a CTA element with text and a custom icon.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Link } from 'flowbite-qwik'
import { IconAngleRightOutline, IconFileSearchOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <Link
      href="#"
      class="inline-flex items-center justify-center rounded-lg bg-gray-50 p-5 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
    >
      <IconFileSearchOutline class="me-3 h-5 w-5" />
      <span class="w-full">Get started with our Figma Design System</span>
      <IconAngleRightOutline class="ms-2 h-4 w-4" />
    </Link>
  )
})

Card link

Use this example to set a hyperlink on a card component.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Card, Heading } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Card href="#" class="max-w-sm">
      <Heading tag="h4">Noteworthy technology acquisitions 2021</Heading>
      <p class="font-normal text-gray-700 dark:text-gray-400">
        Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
      </p>
    </Card>
  )
})