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

Banner light Banner dark

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("ods_empty", 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("ods_empty", 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("ods_empty", 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("ods_empty", 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
    }
}