ba-link-entry
When offering a user many options on how to proceed through their journey, we use stacked link entrys over buttons.
The subtext slot is ideal for giving the user more information on what is required by the action or what the user can do on the next page.
Shapes and symbols can mean different things to different people. Commonly recognisable icons are rare and the same icon can have a different meaning depending on the app or website used. Ensuring the icons support the heading and subheading textcan remove the ambiguity and clarify the meaning
Further Reading:
This helps establish the relationship between the heading and the subheading within the link
It's important to maintain the order of headings so that they appear in a logical order in the page. Screen readers (and other assistive technology) rely on headings to navigate and understand structure of pages.
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:
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
attentionIndicator
|
attention-indicator |
Show the attention indicator on the heading | boolean | undefined |
undefined |
attentionIndicatorText
|
attention-indicator-text |
Text to explain to screen readers that this link requires attention | string | undefined |
'' |
dropShadow
|
drop-shadow |
Toggles a drop shadow on the link | boolean | undefined |
false |
heading
(required)
|
heading |
Sets the link heading, this will populate the heading within the link | string |
undefined |
headingLevel
|
heading-level |
Sets the link headingLevel, this will populate an |
2 | 3 | 4 | 5 | 6 | undefined |
undefined |
href
(required)
|
href |
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | string |
undefined |
iconName
|
icon-name |
Sets an icon at the start of the entry link. | string | undefined |
undefined |
subheading
|
subheading |
Sets the link sub heading | string | 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> |
Slots
| Slot | Description | Permitted elements |
|---|
Parent components
ba-link-entry can be slotted into:
Usage
Basic usage
In most scenarios the entry will consist of a heading and subheading.
<ba-link-entry heaidng="Seat number A1" subheading="Change seat"></ba-link-entry>
With an icon
Add an icon to support the link text
<ba-link-entry icon-name="seat" heaidng="Seat number A1" subheading="Change seat"></ba-link-entry>
Multiple
When needing to provide the user multiple options, multiple ba-link-entry components can be stacked. When not used in ba-grid the spacing between the ba-link-entry's is automatically applied
<ba-link-entry icon-name="seat" heading="Seat number: A1" subheading="Change seat"></ba-link-entry>
<ba-link-entry icon-name="bag" heading="Baggage allowance: 1 hand bag/laptop bag" subheading="Add extra baggage"></ba-link-entry>
<ba-link-entry icon-name="boarding" heading="Not checked in" subheading="Check in to your flight" requires-attention></ba-link-entry>