| Recommended | Not Recommended |
|---|---|
| Context Matters: Make sure the link text describes its destination or purpose clearly. Vague text like "Click here" should be avoided. | No JS Triggers: Do not use links for triggering JavaScript actions like opening modals; it's semantically incorrect. Use buttons or other appropriate elements for such interactions. |
| Local vs External: Clearly distinguish between links that lead to other parts of the same website and those that lead to external sites. | Avoid Surprises: Ensure the link does what it promises. Don't direct users to unrelated content or make them download a file without a clear indication. |
| Progressive Disclosure: Use links to guide the user to more detailed information, effectively organizing content without overwhelming them. | Don't Overlink: Avoid turning every other word in a paragraph into a hyperlink. It makes the text difficult to read and diminishes the impact of your links. |
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'This is a text link',
attributes: {
href: 'https://google.com'
}
} only %}| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
attributes
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
content
*
|
Content of the text link. |
any
| — |
|
|
icon_before
|
Append an icon before the text. Icon element is recommended. However, <img> elements are also acceptable. |
any
| — |
|
|
icon_after
|
Append an icon after the text. Icon element is recommended. However, <img> elements are also acceptable. |
any
| — |
|
|
reversed_underline
|
Set the underline style to appear on hover instead of being always visible. |
boolean
|
false
|
|
|
expand_click_target
|
Expand the click target to cover up the entire area of its closest container that is not positioned static. |
boolean
|
false
|
|
npm install @bolt/elements-text-link