# bpk-component-button

> Backpack React Native button component.

## Primary

| Day | Night |
| --- | --- |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/primary.png" alt="bpk-component-button primary iPhone 8 simulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/primary_dm.png" alt="bpk-component-button primary iPhone 8 simulator - dark mode" width="375" /> |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/primary.png" alt="bpk-component-button primary Google Pixel emulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/primary_dm.png" alt="bpk-component-button primary Google Pixel emulator - dark mode" width="375" /> |

## Primary On Light

| Day | Night |
| --- | --- |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/primaryOnLight.png" alt="bpk-component-button primaryOnLight iPhone 8 simulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/primaryOnLight_dm.png" alt="bpk-component-button primaryOnLight iPhone 8 simulator - dark mode" width="375" /> |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/primaryOnLight.png" alt="bpk-component-button primaryOnLight Google Pixel emulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/primaryOnLight_dm.png" alt="bpk-component-button primaryOnLight Google Pixel emulator - dark mode" width="375" /> |


## Primary On Dark

| Day | Night |
| --- | --- |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/primaryOnDark.png" alt="bpk-component-button primaryOnDark iPhone 8 simulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/primaryOnDark_dm.png" alt="bpk-component-button primaryOnDark iPhone 8 simulator - dark mode" width="375" /> |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/primaryOnDark.png" alt="bpk-component-button primaryOnDark Google Pixel emulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/primaryOnDark_dm.png" alt="bpk-component-button primaryOnDark Google Pixel emulator - dark mode" width="375" /> |


## Secondary

| Day | Night |
| --- | --- |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/secondary.png" alt="bpk-component-button secondary iPhone 8 simulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/secondary_dm.png" alt="bpk-component-button secondary iPhone 8 simulator - dark mode" width="375" /> |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/secondary.png" alt="bpk-component-button secondary Google Pixel emulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/secondary_dm.png" alt="bpk-component-button secondary Google Pixel emulator - dark mode" width="375" /> |

## Secondary On Dark

| Day | Night |
| --- | --- |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/secondaryOnDark.png" alt="bpk-component-button secondaryOnDark iPhone 8 simulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/secondaryOnDark_dm.png" alt="bpk-component-button secondaryOnDark iPhone 8 simulator - dark mode" width="375" /> |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/secondaryOnDark.png" alt="bpk-component-button secondaryOnDark Google Pixel emulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/secondaryOnDark_dm.png" alt="bpk-component-button secondaryOnDark Google Pixel emulator - dark mode" width="375" /> |

## Destructive

| Day | Night |
| --- | --- |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/destructive.png" alt="bpk-component-button destructive iPhone 8 simulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/destructive_dm.png" alt="bpk-component-button destructive iPhone 8 simulator - dark mode" width="375" /> |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/destructive.png" alt="bpk-component-button destructive Google Pixel emulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/destructive_dm.png" alt="bpk-component-button destructive Google Pixel emulator - dark mode" width="375" /> |

## Featured

| Day | Night |
| --- | --- |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/featured.png" alt="bpk-component-button featured iPhone 8 simulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/featured_dm.png" alt="bpk-component-button featured iPhone 8 simulator - dark mode" width="375" /> |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/featured.png" alt="bpk-component-button featured Google Pixel emulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/featured_dm.png" alt="bpk-component-button featured Google Pixel emulator - dark mode" width="375" /> |

## Link

| Day | Night |
| --- | --- |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/link.png" alt="bpk-component-button link iPhone 8 simulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/link_dm.png" alt="bpk-component-button link iPhone 8 simulator - dark mode" width="375" /> |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/link.png" alt="bpk-component-button link Google Pixel emulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/link_dm.png" alt="bpk-component-button link Google Pixel emulator - dark mode" width="375" /> |

## Link On Dark

| Day | Night |
| --- | --- |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/linkOnDark.png" alt="bpk-component-button linkOnDark iPhone 8 simulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/ios/linkOnDark_dm.png" alt="bpk-component-button linkOnDark iPhone 8 simulator - dark mode" width="375" /> |
| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/linkOnDark.png" alt="bpk-component-button linkOnDark Google Pixel emulator" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-react-native/main/screenshots/bpk-component-button/android/linkOnDark_dm.png" alt="bpk-component-button linkOnDark Google Pixel emulator - dark mode" width="375" /> |

## Installation

Check the main [Readme](https://github.com/skyscanner/backpack-react-native#usage) for a complete installation guide.

## Usage

```js
import { StyleSheet, View } from 'react-native';
import React, { Component } from 'react';
import { BUTTON_TYPES, ICON_ALIGNMENTS, BpkButtonV2 } from 'backpack-react-native/bpk-component-button';
import { spacingBase } from '@skyscanner/bpk-foundations-react-native/tokens/base.react.native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: spacingBase,
  }
});

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <BpkButtonV2
          type={BUTTON_TYPES.primary}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButtonV2
          type={BUTTON_TYPES.featured}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButtonV2
          disabled
          type={BUTTON_TYPES.destructive}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButtonV2
          large
          type={BUTTON_TYPES.primary}
          title="Book flight"
          onPress={() => {}}
        />
        <BpkButtonV2
          type={BUTTON_TYPES.featured}
          title="Book flight"
          icon="baggage"
          onPress={() => {}}
        />
        <BpkButtonV2
          type={BUTTON_TYPES.primary}
          title="Book flight"
          icon="baggage"
          iconAlignment={ICON_ALIGNMENTS.leading}
          onPress={() => {}}
        />
        <BpkButtonV2
          type={BUTTON_TYPES.featured}
          title="Book flight"
          icon="baggage"
          iconOnly
          onPress={() => {}}
        />
      </View>
    );
  }
}
```

## Props

| Property              | PropType                                                                  | Required | Default Value |
| --------------------- | ------------------------------------------------------------------------- | -------- | ------------- |
| onPress               | func                                                                      | true     | -             |
| title                 | string                                                                    | true     | -             |
| accessibilityLabel    | string                                                                    | false    | props.title   |
| disabled              | bool                                                                      | false    | false         |
| icon                  | oneOf(string, element) Strings must be a [BpkIcon](/components/web/icons) | false    | null          |
| iconAlignment         | oneOf('leading', 'trailing')                                              | false    | trailing      |
| iconOnly              | bool                                                                      | false    | false         |
| large                 | bool                                                                      | false    | false         |
| type                  | oneOf('primary', 'featured', 'secondary', 'destructive', 'primaryOnLight', 'primaryOnDark', 'secondaryOnDark', 'link', 'linkOnDark')       | false    | null          |