Supplementary answer

The answer above can be applied to a Drupal Paragraph:

{{ node.field_link.0.url }} 

...if you replace the entity type name node with paragraph as so:

{{ paragraph.field_link.0.url }} 

Where in your site, you would have created a Paragraph with a field called link - which would have machine name field_link.

I found that the above {{ paragraph.field_link.0.url }} renders to the URL when used link this:

<a href="{{ paragraph.field_link.0.url }}">{{ paragraph.field_link.0.title }}</a> 

I have defined in the paragraph instance I added in a entity reference node - the usual process for adding paragraphs, of course.

For my purpose, I wanted to create a Call-to-action (CTA) button, using a paragraph, here is all my code below to do that, which illustrates how I've used the twig link and title.

I enclose the whole paragraph markup with the with <a href="{{ paragraph.field_link.0.url }... .../>

And put the link text, the title inside: {{ paragraph.field_link.0.title }}

file:

web/themes/custom/my_theme/templates/paragraphs/paragraph--call-to-action.html.twig 

code:

{% set classes = [ 'paragraph', 'paragraph--type--' ~ paragraph.bundle|clean_class, view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, not paragraph.isPublished() ? 'paragraph--unpublished' ] %} {% block paragraph %} <div class="mysite-cta-outer"> <a href="{{ paragraph.field_link.0.url }}"> <span{{ attributes.addClass(classes).addClass('mysite-cta-fixed') }}> {% block content %} {{ paragraph.field_link.0.title }} {% endblock %} </span> </a> </div> {% endblock paragraph %} 

file:

web/themes/custom/my_theme/css/styles/_cta.css 

code:

.mysite-cta-outer { padding-top: 1.0em; padding-left: 1.5em; } .field--name-field-main-call-to-action-area { margin-bottom: 5em; } .mysite-cta-fixed { border-radius: 0.5em; border: 0.2em solid; padding-top: 0.8em; padding-bottom: 0.8em; width: 15em; color: white; display: inline-block; text-align: center; } span.mysite-cta-fixed a { text-decoration: none; color: white; } span.mysite-cta a { text-decoration: none; color: white; } .mysite-cta { border-radius: 0.5em; border: 0.2em solid; padding-top: 0.8em; padding-bottom: 0.8em; padding-left: 2em; padding-right: 2em; color: white; display: inline-block; } 

Also, a comment about, url vs uri as this has been talked about in other answers. For me, as you can see from my code, url is what I use, in the <a href="{{ paragraph.field_link.0.url }}">...

vardumper util (from Drupal module twig_vardumper ) shows the following for url and url:

{{ vardumper( paragraph.field_link.0.url ) }}

• output :-

^ that initially put me off using url because it was a Url class and not text which I assumed had to be output but it is the right one for outputting the URL. So what seems to happen is that twig renders this Url object as text automatically.

And here's uri output

{{ vardumper( paragraph.field_link.0.uri ) }}

output:-

^ "internal:#our-story" 

Which I didn't use for aforementioned explanation.

This took me a few hours for troubleshooting so I'm grateful for the other answers here, though a bit despairing that there are multiple ways to do it, which potentially causes confusion, also somewhat demoralising to spend a lot of time on something so small. The 'dot' notation here is still something mysterious to me as to how to use it fully, and it shouldn't be. I hope to encounter a definitive guide to get results quickly with this. These answers here do help in the meantime!