Selectable

Selectable chips can be toggled on and off.

Storybook failed to load.

Dropdown chips can be toggled on and off and have a trailing chevron down icon.

Storybook failed to load.

Dismissible

Dismissible chips are useful when applying filters. They are designed to disappear when pressed, so they cannot be toggled on and off.

Note that if chips are being added or removed dynamically (like in the example below), you should render a BpkAriaLive container describing the updates taking place.

By doing this, assistive technologies will know to inform the user when changes are made. By default, only additions to the container will be read out, so you don't need to worry about removing entries again.

Storybook failed to load.

bpk-component-chip

Backpack chip component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import BpkSelectableChip, {
                                                  BpkDismissibleChip,
                                                  BpkDropdownChip,
                                                  BpkIconChip
                                                  CHIP_TYPES,
                                                } from '@skyscanner/backpack-web/bpk-component-chip';
                                                import BeachIconSm from '@skyscanner/backpack-web/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 dropdown chip.
                                                    <BpkDropdownChip
                                                      accessibilityLabel="Press to toggle chip"
                                                      selected={false}
                                                      onClick={() => {
                                                        /* Use state to set 'selected={true}' */
                                                      }}
                                                    >
                                                      Toggle me
                                                    </BpkDropdownChip>
                                                    // Dropdown chip with an icon.
                                                    <BpkDropdownChip
                                                      accessibilityLabel="Press to toggle chip"
                                                      selected={false}
                                                      onClick={() => {
                                                        /* Use state to set 'selected={true}' */
                                                      }}
                                                      leadingAccessoryView={<BeachIconSm />}
                                                    >
                                                      Toggle me
                                                    </BpkDropdownChip>
                                                    // 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>
                                                    <BpkIconChip
                                                      accessibilityLabel="Press to toggle chip"
                                                      selected={false}
                                                      onClick={() => {
                                                        /* Use state to set 'selected={true}' */
                                                      }}
                                                      leadingAccessoryView={<BeachIconSm />}
                                                    />
                                                  </div>
                                                );

Props

Check out the full list of props on Skyscanner's design system documentation website.

Props

Storybook failed to load.