ba-entry

When offering a user many options on how to proceed through their journey, we use stacked entry links over buttons.

GitHub

Component deprecated

This component will be removed in a future release. Similar functionality can be achieved by using the ba-link-entry component

Live Demo

Alex Johns You need to provide more details


<ba-page-segment>
  <ba-entry>
    Alex Johns
    <span slot="subtext">You need to provide more details</span>
  </ba-entry>

  <ba-entry href="https://ba.com">
    Alex Johns
    <span slot="subtext">You need to provide more details</span>
  </ba-entry>
</ba-page-segment>

Guidelines

The subtext slot is ideal for giving the user more information on what is required by the action.

Accessibility

When using the entry component it is important to select the correct type. If the action is show another another menu or activate something on the page a button type must be used. If the action navigates to user to another page the link type must be used.

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`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`
`mandatory`	`mandatory`	If set to `'true'` will show that this element has a mandatory action required.	`boolean \| undefined`	`false`
`mandatoryText`	`mandatory-text`	Text for the visually hidden mandatory text.	`string \| undefined`	`'Requires attention'`
`type`	`type`	The type of the button.	`"button" \| "reset" \| "submit" \| undefined`	`'button'`

Slots

Slot	Description	Permitted elements
Unnamed slot	The main text of the entry	None
`"subText"`	Supplementary text to show under the main CTA	`<span>`
`"action"`	Some kind of action for the user to trigger	`<span>`

Parent components

ba-entry can be slotted into:

Usage

Basic usage

In most scenarios the entry will consist of some text and subtext.

A single ba-entry

<ba-entry>
  Alex Johns
  <span slot="subtext">You need to provide more details</span>
</ba-entry>

As a link

By default ba-entry renders as a button, setting the href prop converts it into a link

Example

Link entry component

<ba-entry href="https://ba.com">
  Link to new page
</ba-entry>

Stacked

When needing to provide the user multiple options, multiple ba-entry components can be stacked.

Stacked ba-entries

<ba-entry>
  Alex Johns
  <span slot="subtext">You need to provide more details</span>
</ba-entry>
<ba-entry href="https://ba.com">
  Alex Johns
  <span slot="subtext">You need to provide more details</span>
</ba-entry>