- Welcome
- Getting started
- Latest updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card list
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Image Gallery
- Infinite scroll
- Info Banner
- Inset Banner
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Navigation Tab Group
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Rating Bar
- Scrollable calendar
- Search Modal
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Swap Button
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Content
- Accessibility
- Contributing
- Localisation
Banner alert
Banner alerts provide inline feedback about an operation or task.
Default
Banner alerts come in various styles to indicate success, warning or error, or some neutral information.
With custom icon
Banner alerts can be configured to show any icon.
Expandable
They can be configured to display further information to the user in the form of an expandable panel.
Dismissible
Banner alerts can be configured to include a close icon so that the user can dismiss them.
Note that if banner-alerts 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.
With enter animation
Banner alerts can be configured to animate when first added to the DOM.
bpk-component-banner-alert
Backpack banner alert component.
👻 This component has been deprecated, and usages should be replaced with bpk-component-info-banner
Installation
Check the main Readme for a complete installation guide.
Usage
Default
import BpkBannerAlert, { ALERT_TYPES } from '@skyscanner/backpack-web/bpk-component-banner-alert';
export default () => (
<BpkBannerAlert
message="Successful alert with more information."
type={ALERT_TYPES.SUCCESS}
/>
);
Dismissable
import { Component } from 'react';
import { ALERT_TYPES, BpkBannerAlertDismissable } from '@skyscanner/backpack-web/bpk-component-banner-alert';
class DismissableBpkBannerAlert extends Component {
constructor() {
super();
this.state = {
show: true,
};
}
setDismissed = () => {
this.setState({
show: false,
});
}
render() {
return (
<BpkBannerAlertDismissable
message="Successful alert with dismiss option."
type={ALERT_TYPES.SUCCESS}
onDismiss={this.setDismissed}
show={this.state.show}
dismissButtonLabel="Dismiss"
/>
);
}
}
export default () => (
<DismissableBpkBannerAlert />
);
withBannerAlertState(BpkBannerAlert)
import { Component } from 'react';
import { ALERT_TYPES, withBannerAlertState, BpkBannerAlertDismissable, BpkBannerAlertExpandable } from '@skyscanner/backpack-web/bpk-component-banner-alert';
const BannerAlertDismissableState = withBannerAlertState(BpkBannerAlertDismissable);
const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable);
<BannerAlertDismissableState
dismissButtonLabel="Dismiss"
message="Successful alert with dismiss option."
type={ALERT_TYPES.SUCCESS}
/>
<BannerAlertDismissableState
dismissButtonLabel="Dismiss"
message="Successful alert that will disappear after 5 seconds."
hideAfter={5}
type={ALERT_TYPES.SUCCESS}
/>
<BannerAlertExpandableState
message="Successful alert with expandable option."
type={ALERT_TYPES.SUCCESS}
toggleButtonLabel="View more"
>
Lorem ipsum dolor sit amet.
</BannerAlertExpandableState>
Props
Check out the full list of props on Skyscanner's design system documentation website.
Props
Made with ❤️ by Skyscanner © 2024
© 2024 Skyscanner Backpack. Page last updated on Nov 16, 2023, 14:42