Skip to main content

Button

Buttons make common actions and navigation easy to perform.

Table of contents

Primary

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

Secondary

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

Destructive

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

Outline

(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
}

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
  • buttonStrokeColor
  • buttonStrokeColorPressed

BpkButton accepts the above themeable attributes for the following styles

  • bpkButtonPrimary
  • bpkButtonSecondary
  • bpkButtonDestructive
  • bpkButtonOutline
  • 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>
    <item name="buttonStrokeColor">@color/bpkKolkata</item>
  </style>

Check theming for more information.

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

Button Link

Installation

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

Usage

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

Example of a primary button in XML

<net.skyscanner.backpack.button.BpkButtonLink
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Button"
  app:buttonIconPosition="end"
  app:buttonIcon="@drawable/bpk_long_arrow_right"
  app:uppercase="true"/>

Example of a primary button in Kotlin

import net.skyscanner.backpack.button.BpkButton

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

Icon

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

Theme Props

  • buttonTextColor

Styles can be changed globally through bpkButtonLinkStyle. Check theming for more information.