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
Airframe
Web Components
React
React Native
Anatomy
Pre-text (optional but recommended)
Text that appears above the price to provide context
Price
The main price value displayed prominently with currency symbol
Sub-text (optional but recommended)
Text that appears below the price to provide additional details
Design Documentation
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:
Live Demo
<ba-link-price
href="/url"
pre-text="Flights from"
price="£1234"
sub-text="Return, from London, Jan 2028"
></ba-link-price>Properties and 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 |
Permitted ARIA roles
- None
Slots
No slotted content available for this component.
Parent components
ba-link-price can be slotted into:
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> |
Usage
Basic usage
<ba-link-price
href="/url"
pre-text="Flights from"
price="£1234"
sub-text="Return, from London, Jan 2028"
></ba-link-price>Featured price variant
<ba-link-price
href="/url"
pre-text="Flights from"
price="£1234"
sub-text="Return, from London, Jan 2028"
variant="featured-price"
></ba-link-price>Single page application routing
<ba-link-price
href="/url"
pre-text="Flights from"
price="£1234"
sub-text="Return, from London, Jan 2028"
></ba-link-price>
<script>
document.querySelector('ba-link-price').addEventListener('baClick', (event) => {
event.detail.preventDefault();
// Now apply custom SPA routing...
});
</script>Guidelines
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
Further reading:
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:
Keyboard navigation
State: Previous element in DOM has focus
ba-link-price anchor element receives focus
State: ba-link-price has focus
Next tabbable element in the DOM gets focus
Browser navigates to URL in href attribute
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- Pick the right variant for the currency length to prevent wrapping or overflow
- Test with dynamic data using realistic prices and text lengths
- Keep pre-text and sub-text concise to maintain clarity
- Ensure the component links to appropriate pages for more information or purchase
Accessibility checklist
- Use at least one of pre-text or sub-text to provide context for the link
- ba-link-price must behave like a link, not a button
- ba-link-price should not open in a new tab or window automatically
- ba-link-price is not nested inside other interactive elements (e.g., buttons, other links, or form controls)
- Browser URL is updated when navigating using ba-link-price
- Focus indicator has not been obscured on all sides of the component
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-link-price is operable using assistive technology
- Has a visible focus indicator on all sides of the link
- Colour contrast for all states in all BAgel themes
- Animations respect users' reduced motion settings
- High contrast mode adjustments