2.24.1Link Component
Text link styles. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-link
{% include "@bolt-components-link/link.twig" with {
text: "This is a link",
url: "https://pega.com"
} only %}
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
| attributes | A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
| text | Renderable content (i.e. a string, render array, or included pattern) for the link. |
string , object , array |
— |
|
| url | If present, users will be directed to this URL when clicking this element. |
string
| — |
|
| target | A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present. |
string
|
_self
|
|
| display | Display either an inline link or flex link (icons can hang on either side). |
string
|
inline
|
|
| valign | Controls the vertical alignment of text and icon. |
string
|
center
|
|
| isHeadline | Whether this link should get special headline styling treatment. |
boolean
| — |
|
| icon | Icon data as expected by the icon component. Accepts an additional position prop that determines placement within the link. |
object
| — |
|
| onClick | When used with onClickTarget, an event to fire on the targeted elements when this element is clicked. When used without onClickTarget, arbitrary javascript to execute when this element is clicked. |
string
| — |
|
| onClickTarget | Requires onClick. A CSS selector for elements that the onClick event will fire on when this element is clicked. |
string
| — |
|
| href | Use url instead. |
| — |
|
This is an
Note that valign only works with flex link (with the icon hanging to the side), it has no effects on inline link.
This is an
<bolt-link>'s inner <a> tag will be retained with two exceptions: inline styles (auto-removed to avoid styling issues) and any HTML attributes that are in direct conflict with the props passed into the web component.url prop passed along to this web component will override any initial HTML href attribute present.