{% include "@bolt-components-link/link.twig" with {
text: "This is a link",
url: "https://pega.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
| — |
|
text
|
Renderable content (i.e. a string, render array, or included pattern) for the link. |
string
, object
, array
|
— |
|
url
|
Optional. Contains a URL that the chip points to. When URL is present, tag changes to |
string
| — |
|
target
|
A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present. |
string
|
_self
|
|
type
|
Determines the button tag type for semantic buttons |
string
|
button
|
|
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
|
|
is_headline
|
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
| — |
|
on_click
|
When used with on_click_target, an event to fire on the targeted elements when this element is clicked. When used without on_click_target, arbitrary javascript to execute when this element is clicked. |
string
| — |
|
on_click_target
|
Requires on_click. A CSS selector for elements that the on_click event will fire on when this element is clicked. |
string
| — |
|
onClick
(deprecated) |
Use on_click instead. |
— | — |
|
onClickTarget
(deprecated) |
Use on_click_target instead. |
— | — |
|
href
(deprecated) |
Use url instead. |
— | — |
|
isHeadline
(deprecated) |
Use is_headline instead. |
— | — |
|
npm install @bolt/components-link
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.