Formatted URL generator
Website fields, external references and record links render via lightning-formatted-url. Style link color, hover state and the optional external-link icon so users can tell at a glance that a value opens outside the app.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-formatted-url
value="https://www.acme.com/pricing"
label="acme.com/pricing"
tooltip="Open pricing page in a new tab"
target="_blank"
class="studio-formatted-url"
></lightning-formatted-url>
</template>Design tips for formatted urls
- Always include the external-link icon when target="_blank" — a link that leaves the app without warning breaks user trust.
- Use your standard link color (not a one-off blue) so formatted URLs feel consistent with every other clickable element in your app.
- Keep the tooltip text specific ("Open pricing page in a new tab") rather than repeating the raw URL, which is rarely useful to read.