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