Skip to main content

Button

Buttons make common actions and navigation easy to perform.

Table of contents

Default

(Google Pixel emulator)
(Google Pixel emulator - dark mode)

Large

(Google Pixel emulator)
(Google Pixel emulator - dark mode)
(Google Pixel emulator)
(Google Pixel emulator - dark mode)

Button Implementation

Button

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.