ba-link

We use ba-link to help users navigate web pages

Figma

GitHub

Storybook

Live Demo

Link text

<ba-link href="/url">Link text</ba-link>

Guidelines

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:

https://www.smashingmagazine.com/2019/02/buttons-interfaces/

Accessibility

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:

https://dequeuniversity.com/checklists/web/links

Keyboard
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

Pointer
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`
`variant`	`variant`	which variant of the button to use	`"large" \| undefined`	`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:

Usage

Basic usage

An example of ba-link being used

<ba-link href="https://ba.com">Flights to Singapore</ba-link>

Using the large variant

An example of the larger variant

<ba-link href="https://ba.com" variant="large">Flights to Singapore</ba-link>

Usage in a single page application

baClick event being used in single page application routing

<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...
});