104Get started
HextaUI

Button: As a link

Pass an anchor to render and set nativeButton={false} so the button keeps link semantics.

Read the docs
import { IconArrowUpRight } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"

export function ButtonLink() {
  return (
    <Button variant="outline" nativeButton={false} render={<a href="#" />}>
      Read the docs
      <IconArrowUpRight data-icon="inline-end" />
    </Button>
  )
}

Add this example

This adds the example as components/examples/button/link.tsx, together with the Button component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/button-link.json

To add only the component, follow the Button installation.

Props in this example

The Button props this example sets, from the API reference.

Button

PropTypeDefault
variant
"default" | "outline" | "secondary" | "ghost" | "ghost-destructive" | "destructive" | "link""default"
nativeButtonSet to false when render is not a <button>.
booleantrue
render
ReactElement | (props, state) => ReactElement<button>

Every prop is in the Button API reference.

More Button examples

See them all, with keyboard support and accessibility notes, on the Button page.

Related components