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:
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 |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <Plain text> |
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
Parent components
ba-link can be slotted into:
<ba‑card><ba‑card‑segmented><ba‑content><ba‑flex><ba‑grid><ba‑hero><ba‑message><ba‑message‑global><ba‑page‑segment>
Usage
Basic usage
<ba-link href="https://ba.com">Flights to Singapore</ba-link>
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...
});