Level indicators

A level indicator displays rich visual information related to a specific numerical value within a range.

Best practices

Avoid using a level indicator to perform the function of a slider. Although some styles support input by clicking and dragging to select a value, people don’t usually expect to be able to interact with a level indicator, and their appearance reflects this. For related guidance, see Sliders.

There are three different level indicator styles, each with a different appearance, for communicating capacity, rating, and relevance.

Capacity indicators

A capacity indicator illustrates the current level in relation to a finite capacity. The system often uses capacity indicators to communicate factors like disk and battery usage. Mail, for example, uses a capacity indicator to show the percentage of data used in relation to an email account’s quota.

There are two styles of capacity indicator.

An image of a continuous capacity indicator that uses the default green fill to indicate an amount of about two-thirds of the total capacity.

Continuous. A horizontal translucent track that fills with a solid bar to indicate the current value.

An image of a discrete capacity indicator that uses the default green fill to indicate an amount of three-quarters of the total capacity.

Discrete. A horizontal row of separate, equally sized, rectangular segments. The number of segments matches the total capacity, and the segments fill completely — never partially — with color to indicate the current value.

Because capacity indicators provide a clear picture of a current state, they’re especially useful in dialogs and settings windows that people tend to view briefly.

An image of a continuous capacity indicator that uses a yellow fill to indicate a warning condition.
An image of a discrete capacity indicator that uses a yellow fill to indicate a warning condition.

Warning level appearance

An image of a continuous capacity indicator that uses a red fill to indicate a critical condition.
An image of a discrete capacity indicator that uses a red fill to indicate a critical condition.

Critical level appearance

An image of a continuous capacity indicator in which the leftmost one-sixth is red, the next three-sixths are yellow, the next sixth is green, and the last sixth is unfilled.
An image of a discrete capacity indicator divided into six sections. The leftmost section is red, the next three sections are yellow, the next section is green, and the last section is unfilled.

Tiered level appearance

Change the fill color to inform people about significant values.The default fill color for both capacity indicator styles is green. If it makes sense in the context of your app, you can change the fill color when the current value reaches certain levels. For example, you could change a battery level indicator from green to yellow at 20% capacity, and from yellow to red at 10% capacity. You can change the fill color of the entire indicator or you can use the tiered state to show a sequence of several colors in one indicator.

Consider using the continuous style for large ranges. A large value range can make the segments of a discrete capacity indicator too small to be useful.

Rating indicators

A rating indicator uses a series of horizontally arranged graphical symbols to communicate a ranking level. The default symbol is a star. In iTunes, for example, you can assign star ratings to individual songs and podcast episodes. The system may reference these ratings for the purposes of searching, sorting, and creating smart playlists.

A screenshot of a rating indicator with the leftmost three stars out of five filled in.

A rating indicator doesn’t display partial symbols; its value is rounded in order to display complete symbols only. Within a rating indicator, symbols are always the same distance apart and don't expand or shrink to fit the control.

Make it easy to change rankings. When presenting a list of ranked items, let people adjust the rank of individual items inline without navigating to a separate editing screen.

If you replace the star with a custom symbol, make sure that its purpose is clear. The star is a very recognizable ranking symbol. People don’t commonly associate other symbols with a rating scale.

For related guidance, see Ratings and reviews.

Relevance indicators

A relevance indicator communicates relevancy using a shaded horizontal bar. It often appears in a list of search results for reference when sorting and comparing multiple items.

Platform considerations

No additional considerations for macOS. Not supported in iOS, iPadOS, tvOS, or watchOS.

Resources

Related

Developer documentation

Supported platforms