2.22.0
Link 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. |
| — |
|