Card button

Found flights you like? The card button lets travellers share flights or save them for later.

Storybook failed to load.

bpk-component-card-button

Backpack card button component.

Installation

Check the main Readme for a complete installation guide.

Usage

BpkSaveButton


                                                
                                                import {
                                                  BpkSaveButton,
                                                  SIZE_TYPES,
                                                  STYLE_TYPES
                                                } from '@skyscanner/backpack-web/bpk-component-card-button';
                                                
                                                export default () =>
                                                  <BpkSaveButton
                                                    checked={false}
                                                    accessibilityLabel="Save Amsterdam hostel"
                                                    onCheckedChange={() => {
                                                      console.log('save status changed!');
                                                    }}
                                                    size={SIZE_TYPES.small}
                                                    style={STYLE_TYPES.contained}
                                                  />;

Accessibility

When someone with a screen reader navigates the page by buttons, they will see a list of all the button names available on the page. we need to ensure there is enough context to understand what the button will do without being overly wordy.

Therefore, the accessibility label of the button should be short and unique. Usually it will take the form of {verb} {unique name}.

When the related item has a unique title, you can use this as a unique name.

Example: Save Amsterdam hostel

If the title of your related item is not unique, you can fall back to a more generic 'option' identifier, as long as this identifier is part of the item title as well.

Example: Save option 1

[!TIP] Avoid adding punctuation to the label, this causes the screen reader to pause unnecessarily.

[!CAUTION] Do not adjust the accessibility label based on the state of the button. This can be disruptive or cause confusion for people using a screen reader. The button will announce 'selected' or 'toggle button' based on the state on its own.

Props

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

Props

Storybook failed to load.