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>
This works for both internal and external URLs. I tested:
#our-team
- a URL fragment for use with an <a
anchor
https://bbc.co.uk
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 ) }}

^ 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!