Link

import { Link, useLink, MDXLink, LinkElement } from '@hanzo/ui'

export function Default() {
  return (
    <XStack flexWrap="wrap" gap="$3" items="center">
      <LinkElement def={{ href: "/ui/button", title: "Buttons" }} />
      <LinkElement
        def={{
          href: "https://github.com/hanzoai/ui",
          title: "Source",
          external: true,
          newTab: true,
        }}
      />
    </XStack>
  )
}

export function AsButton() {
  return (
    <XStack flexWrap="wrap" gap="$3" items="center">
      <LinkElement def={{ href: "/ui", title: "Browse", variant: "primary" }} />
      <LinkElement
        def={{ href: "/ui", title: "Browse" }}
        variant="outline"
        size="sm"
      />
      <LinkElement
        def={{ href: "/ui", title: "Disabled", disabled: true }}
        variant="secondary"
      />
    </XStack>
  )
}

export function CurrentPage() {
  return (
    <XStack gap="$3" items="center">
      <LinkElement
        def={{ href: "/ui/link", title: "Link" }}
        aria-current="page"
        variant="ghost"
      />
      <LinkElement
        def={{ href: "/ui/badge", title: "Badge" }}
        variant="ghost"
      />
    </XStack>
  )
}

export function InProse() {
  return <MDXLink href="/ui/prose">the prose module</MDXLink>
}

Types

export type LinkComponent = React.ElementType

export type LinkElementProps = React.PropsWithChildren<{
  def: LinkDef
  /** Fires alongside the navigation — e.g. to close the drawer it sits in. */
  onClick?: () => void
  /** Overrides `def`. */
  variant?: ButtonVariant | null
  /** Overrides `def`. */
  size?: ButtonSize | null
  /** Overrides `def`. */
  icon?: React.ReactNode
  /** Overrides `def`. */
  iconAfter?: boolean
  /**
   * Only classes that carry a rule — this renders a host anchor, so whatever
   * arrives here reaches the document verbatim. Layout goes in `style`.
   */
  className?: string
  style?: React.CSSProperties
  /**
   * `page` on the link to where you already are. It is how a screen reader
   * says "this one" in a navigation list — the colour that marks it visually
   * says nothing at all.
   */
  'aria-current'?: 'page' | 'true' | false
}>

Exports