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 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`	`:atom`	: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	Attributes
`inner_block`	Required	—

Link.link_button

Attributes

Attributes for Link.link_button
Name	Type	Default	Values
`class`	`:any`	nil	—
`href`	`:any`	nil	—
`method`	`:atom`	: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_button
Name	Required	Attributes
`inner_block`	Required	—