bpk-component-chip-css

Backpack chip component.

Usage no npm install needed!

<script type="module">
  import bpkComponentChipCss from 'https://cdn.skypack.dev/bpk-component-chip-css';
</script>

README

bpk-component-chip

Backpack chip component.

Installation

npm install bpk-component-chip --save-dev

Usage

import React from 'react';
import BpkSelectableChip, { BpkDismissibleChip, CHIP_TYPES } from 'bpk-component-chip';
import BeachIconSm from 'bpk-component-icon/sm/beach';

export default () => (

  <div style={{ display: 'flex' }}> // IMPORTANT: Flex styles make sure chips align with each other
    // Standard selectable chip.
    <BpkSelectableChip
      accessibilityLabel="Press to toggle chip"
      selected={false}
      onClick={() => { /* Use state to set 'selected={true}' */ }}
    >
      Toggle me
    </BpkSelectableChip>

    // Selectable chip with an icon.
    <BpkSelectableChip
      accessibilityLabel="Press to toggle chip"
      selected={false}
      onClick={() => { /* Use state to set 'selected={true}' */ }}
      leadingAccessoryView={<BeachIconSm />}
    >
      Toggle me
    </BpkSelectableChip>

    // Standard dismissible chip.
    <BpkDismissibleChip
      accessibilityLabel="Press to dismiss chip"
      onClick={() => { /* Use state to handle removing this chip. */ }}
    >
      Dismiss me
    </BpkDismissibleChip>

    // Dismissible chip with an icon.
      <BpkDismissibleChip
      accessibilityLabel="Press to dismiss chip"
      onClick={() => { /* Use state to handle removing this chip. */ }}
      leadingAccessoryView={<BeachIconSm />}
    >
      Dismiss me
    </BpkDismissibleChip>
  </div>
);

Props

BpkSelectableChip

Property PropType Required Default Value
accessibilityLabel string true -
children node true -
onClick func true -
className string false null
disabled bool false false
leadingAccessoryView node false null
selected bool false false
trailingAccessoryView node false null
type oneOf(CHIP_TYPES.light, CHIP_TYPES.primary, CHIP_TYPES.success)

BpkDismissibleChip

Dismissible chips are selectable chips that have been preconfigured to have a 'close' icon trailing accessory view and cannot be selected, so they have the same props as BpkSelectableChip, minus trailingAccessoryView and selected.

Property PropType Required Default Value
accessibilityLabel string true -
children node true -
onClick func true -
className string false null
disabled bool false false
leadingAccessoryView node false null
type oneOf(CHIP_TYPES.light, CHIP_TYPES.primary, CHIP_TYPES.success)

Theme Props

Primary

  • chipPrimarySelectedBackgroundColor
  • chipPrimarySelectedHoverBackgroundColor
  • chipPrimarySelectedActiveBackgroundColor
  • chipPrimarySelectedTextColor

Light

  • chipLightSelectedBackgroundColor
  • chipLightSelectedHoverBackgroundColor
  • chipLightSelectedActiveBackgroundColor
  • chipLightSelectedTextColor

Success

  • chipSuccessSelectedBackgroundColor
  • chipSuccessSelectedHoverBackgroundColor
  • chipSuccessSelectedActiveBackgroundColor
  • chipSuccessSelectedTextColor