ba-link-price
We use the ba-link-price component to promote prices and link to a page where the user can find more information or make a purchase
Some currencies have longer symbols or names, which may cause the ba-link-price to wrap or overflow. Test the ba-link-price with different currencies to ensure it displays correctly and leaves enough space for longer prices. If the currency is too long, consider switching from the featured-price variant to the default variant
If the content is dynamic (e.g., price updates), test the component with a variety of realistic price ranges and text lengths to avoid layout issues like overflow or wrapping.
Avoid excessively long pre-text or sub-text, as this may crowd the design or confuse users. Keep these concise to maintain clarity.
Users have an expectation of what would happen when they click on a link element
Button like functionality includes:
- Launching modals
- Opening menus
- Submitting forms
- etc
Further reading:
While the pre-text and sub-text slots are optional, use at least one to provide context and ensure the link is clear and understandable to all users
Making links look and behave like links, and making buttons look and behave like buttons, helps the user understand what will happen when they interact with them. The visual appearance of the element will also match options they have available to them in the browser (e.g. open in new tab, save as bookmark etc)
Further reading:
Automatically opening links in a new tab can confuse and disorient users. It is better to let the user decide how they want to open the link.
Further reading:
Nesting interactive components can strip the semantics from an element and may make it harder for some users to interact with the ba-link component
Disabled link elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments
Further reading:
| Element | State | Key | Behaviour |
|---|---|---|---|
<ba-link> |
Previous element in DOM has focus | Tab |
<a> gets focus |
<a> |
<a> has focus |
Tab |
Next tabbable element in the DOM gets focus |
<a> |
<a> has focus |
Enter |
Browser navigates to url in href attribute |
| Element | State | Action | Behaviour |
|---|---|---|---|
<a> |
- | Click or Tap |
Browser navigates to url in href attribute |
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
href
(required)
|
href |
Url to link to | string |
undefined |
preText
|
pre-text |
Text to display before the price. (Optional - Required if no subText) | string | undefined |
undefined |
price
(required)
|
price |
Price to display | string |
undefined |
subText
|
sub-text |
Text to display after the price. (Optional - Required if no preText) | string | undefined |
undefined |
variant
|
variant |
Which variant of ba-link-price should render | "" | "featured-price" | undefined |
undefined |
Events
| Event | Description | Type |
|---|---|---|
baClick |
Emitted when the internal link is clicked. For use with single-page app (SPA) routing so that link clicks can be handled to avoid a full page load. | CustomEvent<MouseEvent> |
Permitted ARIA roles
None
Usage
Basic usage
<ba-link-price
href="/url"
pre-text="Flights from"
price="£1234"
sub-text="Return, from London, Jan 2028"
></ba-link-price>
Increse the size of the price
The size of the price can be increased by setting the variant to featured-price
<ba-link-price
href="/url"
pre-text="Flights from"
price="£1234"
sub-text="Return, from London, Jan 2028"
variant="featured-price"
></ba-link-price>
Usage in a single page application
<ba-link href="https://ba.com">Flights to Singapore</ba-link>
document.querySelector('ba-link').addEventListener('baClick', (event) => {
event.detail.preventDefault();
// Now apply custom SPA routing...
});