Skip to main content

Button

Buttons make common actions and navigation easy to perform.

Table of contents

Accessibility considerations

Icon-only buttons

Buttons always require a label for people to understand their meaning.

If a visual label isn't present then an accessible name should be provided to include visually impaired visitors. Designers & UX writers should supply this label.

Loading states

When a button is in its loading state, it is disabled from further interaction until the action completes or the action fails to complete.

Visually impaired visitors should also be updated on progress. If a visual label is not on the loading button, then an accessible name should be provided. After completion focus should be placed on the most sensible location based on the previous interaction, for example a heading element, modal window, or a control.

Accessibility testing

Screen reader testing

Talkback

  1. Swipe right to the button.
  2. Ensure the purpose and role are clear, and announced. For example, 'Search flights, button'.
  3. If the button has a state, such as expanded, collapsed, or disabled, then this should also be announced.

Button Implementation

Button

Maven Central Class reference Source code

Standard

DayNight
Standard Button componentStandard Button component - dark mode

Large

DayNight
Large Button componentLarge Button component - dark mode
DayNight
Link Button componentLink Button component - dark mode

Installation

Backpack Android is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

The Button component can be used in both XML and Kotlin/Java

Example of a primary button in XML

<net.skyscanner.backpack.button.BpkButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Button"
  app:buttonIconPosition="end"
  app:buttonIcon="@drawable/bpk_long_arrow_right"
  app:buttonType="primary"
  app:buttonLoading="false" />

Example of a primary button in Kotlin

import net.skyscanner.backpack.button.BpkButton

BpkButton(context,BpkButton.Type.Primary).apply {
   icon = AppCompatResources.getDrawable(context, R.drawable.bpk_weather)
   iconPosition = BpkButton.END
   text = "Button"
   loading = false
}

Large

Example of a large secondary button in XML

<net.skyscanner.backpack.button.BpkButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Button"
  app:buttonIconPosition="end"
  app:buttonIcon="@drawable/bpk_long_arrow_right"
  app:buttonType="primary"
  app:bpkButtonSize="large"
  app:buttonLoading="false" />

Example of a large secondary button in Kotlin

import net.skyscanner.backpack.button.BpkButton

BpkButton(context, BpkButton.Type.Secondary, size = BpkButton.Size.Large).apply {
   icon = AppCompatResources.getDrawable(context, R.drawable.bpk_weather)
   iconPosition = BpkButton.END
   text = "Button"
   loading = false
}

Icon

The icon prop only supports VectorDrawables or BitmapDrawables. If you provide a different drawable make sure its size is 16dp.

Theme Props

  • buttonBackground
  • buttonTextColor

BpkButton accepts the above themeable attributes for the following styles

  • bpkButtonPrimary
  • bpkButtonSecondary
  • bpkButtonDestructive
  • bpkButtonPrimaryOnDark
  • bpkButtonPrimaryOnLight
  • bpkButtonFeatured

Example

  <style name="BlueTheme" parent="AppTheme">
    <item name="bpkButtonPrimary">@style/BlueButton</item>
  </style>

  <style name="BlueButton">
    <item name="buttonBackground">@color/bpkSkyBlueShade03</item>
    <item name="buttonTextColor">@color/bpkSkyGrayTint05</item>
  </style>

Check theming for more information.