ba-button
Buttons are used for in page interactions such as submitting a form or showing/hiding content
Figma
GitHub
Storybook
Live Demo
<ba-button>Click me</ba-button>Guidelines
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
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:
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:
| Element | State | Key press | Behaviour |
|---|---|---|---|
| Previous element in DOM | Previous element in DOM has focus | Tab |
<button> in shadow DOM gets focus |
<button> in shadow |
button in shadow has focus | Space |
Triggers the baClick Event |
<button> in shadow |
button in shadow has focus | Enter |
Triggers the baClick Event |
<button> in shadow |
button in shadow has focus | Tab |
Next tabbable element in the DOM gets focus |
Code
Properties & 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' |
Events
| Event | Description | Type |
|---|---|---|
baClick |
Emitted when the button in the shadow DOM is clicked. | CustomEvent<MouseEvent> |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <Plain text> |
Permitted ARIA roles
None
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>
Usage
Basic usage
Most scenarios will only require the variant attribute and 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