ba-link
We use ba-link to help users navigate web pages
Airframe
Web Components
React
React Native
Anatomy
Link
A clear and accessible text link that describes the destination or action, with visual styling such as underline and colour to help users recognise it as interactive
Design Documentation
Using only one large link per section enhances the user's focus by highlighting the main action, while simultaneously reducing visual clutter.
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 href="/url">Link text</ba-link>
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
href(required) |
href |
Url to link to | string |
undefined |
variant |
variant |
which variant of the button to use | "large" | undefined |
undefined |
Permitted ARIA roles
- None
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <Plain text>, <span> |
Parent components
ba-link can be slotted into:
<ba‑card><ba‑card‑segmented><ba‑checkbox‑card><ba‑content><ba‑flex><ba‑grid><ba‑hero><ba‑message><ba‑message‑global><ba‑page‑segment>
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 href="https://ba.com">Flights to Singapore</ba-link>Using the large variant
<ba-link href="https://ba.com" variant="large">Flights to Singapore</ba-link>Usage in a single page application
<ba-link href="https://ba.com">Flights to Singapore</ba-link>
<script>
document.querySelector("ba-link").addEventListener("baClick", (event) => {
event.detail.preventDefault();
// Now apply custom SPA routing...
});
</script>Using a visually hidden span in the slot
<ba-link href="https://ba.com/tickets">
Find tickets
<span class="ba-u-visually-hidden-text">Taylor Swift: The Eras Tour</span>
</ba-link>Guidelines
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:
Keyboard navigation
State: Previous element in DOM has focus
<a> gets focus
State: <a> 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
- ba-link is only used for navigation and not for button-like actions such as submitting forms, launching modals, or opening menus
- Link text is clear, descriptive, and communicates the destination
Accessibility checklist
- ba-link has discernible text
- ba-link has not been disabled
- Browser URL is updated when navigating using ba-link
- Focus indicator has not been obscured on all sides of the component
- ba-link is not nested inside other interactive elements (e.g., buttons, other links, or form controls)
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-link 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