bpk-component-chip-css
v5.2.11
Published
Backpack chip component.
Downloads
103
Keywords
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