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
Copy
<.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
Copy
          <.a to="/logout" method={:delete} class="" label="Logout" />

        
Properties
elixir
Copy
            # <.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)