ba-button
Buttons are used for in page interactions such as submitting a form or showing/hiding content
Airframe
Web Components
React
React Native
Anatomy
Button container
Defines the clickable area of the button and provides the visual styling, including shape, colour, and interactive states
Button text
Clearly describes the action the button performs when clicked or activated via keyboard
Design Documentation
Button copy should be brief and to the point. Use simple, concise language that clearly conveys the action that the button will perform.
Use action-oriented verbs that encourage the user to take a specific action, such as "Check in," "Search flights," or "Next step."
Keep button text to 1-3 words. This will aid in translations and prevent wrapping.
Further reading:
Using only one primary button per section enhances the users focus by highlighting the main action, while simultaneously reducing visual clutter.
The main purpose of the primary button is to perform confirmatory actions for the user. For example:
- Starting a search
- Confirming your payment
- Logging into your account
- Confirming check in
Secondary buttons should be used in conjunction with primary buttons, for less pronounced and alternative actions. The purpose of the secondary button in a group should be to form less important actions such as “cancel”.
Use consistent button placement throughout your flows. For example, place primary action buttons consistently in the same location on each page to help users develop a mental model of your interface
Single page forms
Left align buttons for single page forms and when the form is the primary purpose of a page. This also applies for confirmatory actions eg. OK/Cancel
Search forms
Right align buttons for search forms
Don’t clutter too many buttons together in a group. Utilise white space to break out your content into separate sections if you have multiple options
Live Demo
<ba-button>Click me</ba-button>Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
loading |
loading |
Show the loading state | boolean | undefined |
false |
loadingText |
loading-text |
Overwrites the default loading text | string | undefined |
'' |
noSubmit |
no-submit |
Prevents the button form submitting when inside ba-form | boolean | undefined |
false |
variant |
variant |
Which variant of ba-button should render | "primary" | "secondary" | undefined |
'primary' |
Permitted ARIA roles
- None
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <Plain text> |
Parent components
ba-button can be slotted into:
<ba‑card><ba‑card‑segmented><ba‑flex><ba‑form><ba‑form‑group><ba‑grid><ba‑message><ba‑message‑global>
Events
| Event | Description | Type |
|---|---|---|
baClick |
Emitted when the button in the shadow DOM is clicked. | CustomEvent<MouseEvent> |
Usage
Basic usage
Most scenarios will only require some content
<ba-button>Book flights</ba-button>Show a loading state
When the loading attribute is added to ba-button the button text is replaced by a default "Loading" message. This can be overwritten by using the loading-text-attribute
<ba-button loading loading-text="Booking your flights">Book flights</ba-button>Using the no-submit attribute
An example of why and how to use the no-submit attribute can be found on the ba-form docs
Guidelines
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:
Disabled buttons are not supported in BAgel. They are poor for accessibility and are sometimes not read properly by screen readers.
As an alternative, use the default button and trigger validation externally, eg. on inputs in a form.
Further reading:
Keyboard navigation
State: Previous element in DOM has focus
<button> in shadow DOM gets focus
State: <button> in shadow has focus
Triggers the baClick Event
Triggers the baClick Event
Next tabbable element in the DOM gets focus
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- Button text is short, actionable, and limited to 1-3 words (keeps translation simple and avoids wrapping)
- Avoid generic labels like "click here" or "go to."
- Only the button is clickable - surrounding whitespace is not interactive
- There is only one primary button per section
- Primary and secondary buttons are placed consistently - e.g. bottom left for single column forms, bottom right for search forms
- On screens up to 480px wide, buttons are full width and stacked vertically with primary button first (top)
- On screens over 480px wide, buttons are sized to fit their content and placed horizontally with primary button first (on the left)
Accessibility checklist
- Button does not open a new page unless it submits a form
- Button has not been disabled
- Focus indicator has not been obscured on all sides of the button
- Button has discernible, descriptive text
- Button text is not in all caps
- Button is reachable using assistive technology
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-button is operable using assistive technology
- Has a visible focus indicator on all sides of the button
- Colour contrast for all states in all BAgel themes
- Animations respect users' reduced motion settings
- High contrast mode adjustments