Banners
A banner displays an important message which requires an action to be dismissed.
Page Summary
A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.
Banners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time
Specifications references
Accessibility
Please follow accessibility criteria for development
Variants
No button
ODSBanner(text: "One to two lines is preferable on mobile and tablet.",
imageSource: .image(Image("placeholder", bundle: Bundle.ods)))
One button
The button is placed under the text.
ODSBanner(text: "One to two lines is preferable on mobile and tablet.",
imageSource: .image(Image("placeholder", bundle: Bundle.ods))) {
Button("Button") {
// your action here
}
}
Two buttons
Button are placed under the text.
ODSBanner(text: "One to two lines is preferable on mobile and tablet.",
imageSource: .image(Image("placeholder", bundle: Bundle.ods))) {
Button("Button 1") {
// your action here
}
} secondButton: {
Button("Button 1") {
// your action here
}
}
Without image
ODSBanner(text: "One to two lines is preferable on mobile and tablet.") {
Button("Button 1") {
// your action here
}
} secondButton: {
Button("Button 1") {
// your action here
}
}
With image from url
let placeholder = Image("placeholder", bundle: Bundle.ods)
let url = URL(string: "https://images.unsplash.com/photo-1615735487485-e52b9af610c1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80")
ODSBanner(text: "One to two lines is preferable on mobile and tablet.",
imageSource: .asyncImage(url, placeholder)) {
Button("Button 1") {
// your action here
}
} secondButton: {
Button("Button 1") {
// your action here
}
}