Button

Default

Day	Night

Large

Day	Night

Link

Day	Night

Drawable Icon

Day	Night

Installation

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

Usage

Example of a text Button with default (small) size and primary type:

                                                
                                                import net.skyscanner.backpack.compose.button.BpkButton
                                                import net.skyscanner.backpack.compose.button.BpkButtonSize
                                                import net.skyscanner.backpack.compose.button.BpkButtonType
                                                
                                                BpkButton(
                                                  text = stringResource(R.string.my_button_text),
                                                  size = BpkButtonSize.Default,
                                                  type = BpkButtonType.Primary,
                                                ) {
                                                    // onClick
                                                }

Example of a disabled button:

                                                
                                                import net.skyscanner.backpack.compose.button.BpkButton
                                                
                                                BpkButton(
                                                  text = stringResource(R.string.my_button_text),
                                                  enabled = false,
                                                ) {
                                                  // onClick
                                                }

Example of a loading button:

                                                
                                                import net.skyscanner.backpack.compose.button.BpkButton
                                                
                                                BpkButton(
                                                  text = stringResource(R.string.my_button_text),
                                                  loading = true,
                                                ) {
                                                  // onClick
                                                }

Example of a large button:

                                                
                                                import net.skyscanner.backpack.compose.button.BpkButton
                                                import net.skyscanner.backpack.compose.button.BpkButtonSize
                                                
                                                BpkButton(
                                                  text = stringResource(R.string.my_button_text),
                                                  size = BpkButtonSize.Large,
                                                ) {
                                                  // onClick
                                                }

Example of a secondary button:

                                                
                                                import net.skyscanner.backpack.compose.button.BpkButton
                                                import net.skyscanner.backpack.compose.button.BpkButtonType
                                                
                                                BpkButton(
                                                  text = stringResource(R.string.my_button_text),
                                                  type = BpkButtonType.Secondary,
                                                ) {
                                                  // onClick
                                                }

Example of a icon only button:

                                                
                                                import net.skyscanner.backpack.compose.button.BpkButton
                                                import net.skyscanner.backpack.compose.icons.BpkIcons
                                                import net.skyscanner.backpack.compose.icons.sm.LongArrowRight
                                                
                                                BpkButton(
                                                  icon = BpkIcons.Sm.LongArrowRight,
                                                  contentDescription = stringResource(R.string.my_button_content_description),
                                                ) {
                                                  // onClick
                                                }

Example of a button with leading icon and text:

                                                
                                                import net.skyscanner.backpack.compose.button.BpkButton
                                                import net.skyscanner.backpack.compose.button.BpkButtonIconPosition
                                                import net.skyscanner.backpack.compose.icons.BpkIcons
                                                import net.skyscanner.backpack.compose.icons.sm.LongArrowRight
                                                
                                                BpkButton(
                                                  text = stringResource(R.string.my_button_text),
                                                  icon = BpkIcons.Sm.LongArrowRight,
                                                  position = BpkButtonIconPosition.Start,
                                                ) {
                                                  // onClick
                                                }

Example of a button with custom icon and text:

                                                
                                                import net.skyscanner.backpack.compose.button.BpkButton
                                                import androidx.compose.ui.res.painterResource
                                                
                                                BpkButton(
                                                  text = stringResource(R.string.my_button_text),
                                                  icon = painterResource(id = R.drwable.custom_icon),
                                                ) {
                                                  // onClick
                                                }