Link

Solidtype_heroui.Link is Kobalte’s Link.Root, an anchor, with the classes HeroUI’s own linkVariants gives, and Link.Icon, HeroUI’s arrow. Its state is declared as React Aria writes it: Enter presses a link, and Space does not.

Usage

HeroUI’s examples, with HeroUI’s icons from @gravity-ui/icons.

Call to action

link_usage.mlx

module Link = Solidtype_heroui.Link

let make () = <Link href="#">"Call to action" <Link.Icon /></Link>

Examples

Icon Placement

Icon at end (default)Icon at start

link_placement.mlx

module Link = Solidtype_heroui.Link

let make () =
  <div class_="flex flex-col gap-3">
    <Link href="#">"Icon at end (default)" <Link.Icon /></Link>
    <Link class_="gap-1" href="#"><Link.Icon /> "Icon at start"</Link>
  </div>

Text Decoration with Tailwind CSS

Default hover underline

Hover to see the underline

Always visible underline

Underline always visible

No underline

Link without any underline

Changing the underline offset

Offset 1 (1px space)Offset 2 (2px space)Offset 3 (3px space)Offset 4 (4px space)

link_decoration.mlx

module Link = Solidtype_heroui.Link

let make () =
  <div class_="flex flex-col gap-6">
    <div class_="flex flex-col gap-2">
      <p class_="text-sm font-medium text-muted">"Default hover underline"</p>
      <Link href="#">"Hover to see the underline" <Link.Icon /></Link>
    </div>
    <div class_="flex flex-col gap-2">
      <p class_="text-sm font-medium text-muted">"Always visible underline"</p>
      <Link class_="underline" href="#">
        "Underline always visible" <Link.Icon />
      </Link>
    </div>
    <div class_="flex flex-col gap-2">
      <p class_="text-sm font-medium text-muted">"No underline"</p>
      <Link class_="no-underline" href="#">
        "Link without any underline" <Link.Icon />
      </Link>
    </div>
    <div class_="flex flex-col gap-2">
      <p class_="text-sm font-medium text-muted">
        "Changing the underline offset"
      </p>
      <div class_="flex flex-col gap-3">
        <Link class_="underline-offset-1" href="#">
          "Offset 1 (1px space)" <Link.Icon />
        </Link>
        <Link class_="underline-offset-2" href="#">
          "Offset 2 (2px space)" <Link.Icon />
        </Link>
        <Link class_="underline-offset-3" href="#">
          "Offset 3 (3px space)" <Link.Icon />
        </Link>
        <Link class_="underline-offset-4" href="#">
          "Offset 4 (4px space)" <Link.Icon />
        </Link>
      </div>
    </div>
  </div>

Custom Icon

External linkGo to page

link_custom_icon.mlx

module Link = Solidtype_heroui.Link

let make () =
  <div class_="flex flex-col gap-3">
    <Link href="#">
      "External link"
      <Link.Icon class_="ms-1.5 size-3">
        <Gravity.Arrow_up_right_from_square />
      </Link.Icon>
    </Link>
    <Link class_="gap-1" href="#">
      "Go to page" <Link.Icon class_="size-3"><Gravity.Link /></Link.Icon>
    </Link>
  </div>

Render Function

HeroUI’s Render Function example gives the link render, React’s way to swap the element it renders, which a Solid component has no need of.

Customization

Tailwind CSS

class_ is added after HeroUI’s classes.

Call to action

link_tailwind.mlx

module Link = Solidtype_heroui.Link

let make () =
  <Link
    class_="font-medium text-neutral-700 underline decoration-neutral-300/80 \
            underline-offset-4 transition-colors hover:text-neutral-900 \
            dark:text-neutral-300 dark:decoration-neutral-600/80 \
            dark:hover:text-neutral-100"
    href="#">
    "Call to action" <Link.Icon />
  </Link>

Global CSS

HeroUI’s classes are global, so a stylesheet restyles every one, as with HeroUI in React:

@layer components {
  .link {
    @apply font-semibold;
  }
}

Styling Reference

CSS Classes

• .link, .link__icon

Interactive States

• Focus: :focus-visible or [data-focus-visible="true"]
• Hover: :hover or [data-hovered="true"]
• Pressed: :active or [data-pressed="true"]
• Disabled: [aria-disabled="true"]

A disabled link is a <span role="link"> in React and stays an <a> here, Kobalte’s element; both are aria-disabled="true" and data-disabled="true".

API Reference

Each prop beside the name HeroUI’s React component gives it.

Link

React	solidtype	Type	Default	Description
href	href	string	required	Where it leads
isDisabled	is_disabled	bool	false	Whether it is disabled
className	class_	string		Added after HeroUI’s classes
children	children	elements		Its text, and its icon

Link.Icon

React	solidtype	Type	Description
className	class_	string	Added after HeroUI’s class
children	children	elements	Its icon; HeroUI’s arrow when none is given

Beside React

Original HeroUI documentation: Link.

The same HeroUI Link twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two links: a marked row is one they disagree on, and a dimmed row is a framework’s own, which no style reads.

icondisabled

solidtype — OCaml, on Solid and Kobalte

Read the docs

React — TypeScript, on React Aria

attribute	solidtype	React