ba-link-entry
When offering a user many options on how to proceed through their journey, we use stacked link entries over buttons.
Airframe
Web Components
React
React Native
Anatomy
Icon (optional)
An optional icon that supports and reinforces the meaning of the heading and subheading text.
Heading
The primary text that describes the action or destination. When a subheading is present, this becomes a heading element at the specified level.
Subheading
Optional secondary text that provides additional context about the action or what the user can do on the next page.
Link container
Defines the clickable area of the link and provides the visual styling, including shape, colour, and interactive states.
Design Documentation
The subheading attribute 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 text can remove the ambiguity and clarify the meaning.
Further reading:
Live Demo
<ba-link-entry
heading="Heading 1"
subheading="Subheading 1"
href="/link"
icon-name="chat"
></ba-link-entry>
<ba-link-entry
heading="Heading 2"
subheading="Subheading 2"
href="/link"
icon-name="bag"
></ba-link-entry>
<ba-link-entry
heading="Heading 3"
subheading="Subheading 3"
href="/link"
icon-name="clock"
></ba-link-entry>
Properties and 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 |
Permitted ARIA roles
- None
Slots
No slotted content available for this component.
Parent components
ba-link-entry 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
In most scenarios the entry will consist of a heading and subheading.
<ba-link-entry heading="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" heading="Seat number A1" subheading="Change seat"></ba-link-entry>Multiple link entries
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 components 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>Guidelines
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:
Keyboard navigation
State: Link entry is not focused
Moves focus to the link entry, displaying the focus indicator
State: Link entry has focus
Activates the link and navigates to the destination
Moves focus to the next focusable element
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- Use the subheading when more context is needed to clarify the action
- Use icons to support the heading and subheading text, not as the sole indicator
- Ensure icons reinforce the text to remove ambiguity about meaning
- Stack multiple link entries when offering users several navigation options
- Maintain consistent spacing between stacked link entries
Accessibility checklist
- Use the heading-level attribute to maintain proper heading hierarchy in the page
- Ensure icons are decorative and hidden from screen readers with supportive text always present
- Provide discernible link text that clearly indicates the destination or action
- 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-entry 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