Link

New

Overview

Use a link whenever you navigate to a new page or patch the current LiveView.

Installation Phoenix link documentation Patch this page

HEEx

<div class="flex flex-wrap items-center justify-center gap-4">
  <Link.link navigate={~p"/docs/installation"}>Installation</Link.link>
  <Link.link
    color={:blue}
    href="https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#link/1"
  >Phoenix link documentation</Link.link>
  <Link.link
    color={:muted}
    patch={@tab_path <> "?tab=activity"}
  >Patch this page</Link.link>
</div>

Link button

Use link_button when you want a link to look like a button.

View pricing

HEEx

<div class="flex justify-center">
  <Link.link_button navigate={~p"/pricing"}>View pricing</Link.link_button>
</div>

Add this module

terminal

mix dizzy.add link

Component API

Link.link

Attributes

Attributes for Link.link
Name	Type	Default	Values
`class`	`:any`	nil	—
`color`	`:atom`	:current	:current, :blue, :muted
`href`	`:any`	nil	—
`method`	`:string`	"get"	"get", "head", "post", "put", "patch", "delete", "options", "connect", "trace"
`navigate`	`:string`	nil	—
`patch`	`:string`	nil	—
`replace`	`:boolean`	false	—
`rest`	`:global`	nil	—

Slots

Slots for Link.link
Name	Required
`inner_block`	Required

Link.link_button

Attributes

Attributes for Link.link_button
Name	Type	Default	Values
`class`	`:any`	nil	—
`href`	`:any`	nil	—
`kind`	`:atom`	:primary	:primary, :secondary, :outline, :ghost, :destructive
`method`	`:string`	"get"	"get", "head", "post", "put", "patch", "delete", "options", "connect", "trace"
`navigate`	`:string`	nil	—
`patch`	`:string`	nil	—
`replace`	`:boolean`	false	—
`rest`	`:global`	nil	—
`size`	`:atom`	:lg	:xs, :sm, :md, :lg, :icon_xs, :icon_sm, :icon, :icon_lg

Slots

Slots for Link.link_button
Name	Required
`inner_block`	Required