Empty states

An empty state can occur when no content or data is available to display in the UI. Avoid displaying completely empty screens.

An empty state display should inform the user of what is happening, why it’s happening and what to do about it.


On this page


Specifications references

Accessibility

Please follow accessibility criteria for development.

The ODS Empty states module is built to support accessibility criteria and is readable by most screen readers, such as TalkBack.

Integration

Empty state light Empty state dark

Jetpack Compose

To integrate an ODS Empty state into your app, you can use OdsEmptyStateView composable as shown below:

OdsEmptyStateView(
    title = "No result",
    text = "Try a new search",
    button = OdsEmptyStateView.Button(text = "Search") {
        // Do something
    },
    image = OdsEmptyStateView.Image(painter = painterResource(id = R.drawable.il_no_result))
)

OdsEmptyStateView API

Parameter Default value Description
title: String   The title of the screen displayed below the image. For example “File is missing”.
modifier: Modifier Modifier Modifier applied to the composable
text: String? null Text displayed below the title
image: OdsEmptyStateView.Image OdsEmptyStateView.Image(painter = painterResource(id = R.drawable.il_yoga_man)) Image displayed centered in the composable
button: OdsEmptyStateView.Button? null The button to add below the text