Components Links

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

One link component for plain anchors, live patches and live redirects - pick the navigation mode with link_type. It also underpins button, tab and dropdown items, so everything that navigates shares the same grammar.
heex
<.a to="/" class="" label="Link" />
<.a link_type="live_patch" to="/" class="" label="Link" />
<.a link_type="live_redirect" to="/" class="" label="Link" />

<!-- We use Phoenix.HTML.Link.link()  -->
<.a to="/" method="put" class="" label="Link" />

Under the hood we use the functions:

All props are forwarded to these functions so you can do something like this:

heex
          <.a to="/logout" method={:delete} class="" label="Logout" />

        
Properties
elixir
            # <.a>
  attr(:class, :string, default: "", doc: "CSS class for link")
  attr(:link_type, :string, default: "a", values: ["a", "live_patch", "live_redirect", "button"])
  attr(:label, :string, default: nil, doc: "label your link")
  attr(:to, :string, default: nil, doc: "link path")
  attr(:disabled, :boolean, default: false, doc: "disables your link")
  attr(:rest, :global, include: ~w(method download))
  slot(:inner_block, required: false)