Notification Center Widgets

A widget is an extension that displays a small amount of information or app-specific functionality in the Today pane of Notification Center. For example, the Weather and World Clock widgets display the weather and time in the user's current location and others they've chosen. Widgets are highly customizable and can contain buttons, text, layout customizations, images, and more.

Design a glanceable experience. People use widgets to get brief updates and perform very simple tasks, so it’s essential to deliver the right amount of information and interactivity. Whenever possible, provide tasks that can be completed in a single step. Panning and scrolling within widgets isn’t supported.

Show content quickly. People spend very little time in Notification Center, so you don't want to make them wait for content to load. Cache information locally so you can always show recent information while getting updates.

Screenshot of the Today pane cropped to show the current date and weather, in addition to the Weather and World Clock widgets.

Provide ample margins and padding. Avoid extending content to the edges of a widget. In general, use the default margins provided by Notification Center. Content tends to work well when aligned to the center of your app icon, located in the widget's title bar. If your app offers a grid-style layout, make sure you provide sufficient and equal padding between grid items. If possible, limit grids of icons and buttons to four per row.

Be adaptable. The height and information displayed by a widget depends on whether it’s collapsed or expanded (not all widgets support expansion). An expanded widget is ideally no taller than the height of the screen. When collapsed, a widget should show essential information that can stand alone. When expanded, a widget should show additional information that enhances the primary information. The Weather widget, for example, shows the current weather conditions when collapsed, but adds the hourly and weekly forecast when expanded. If you need a table view in your widget, be sure to use a table view that doesn’t include a scroll view.

Avoid customizing the background of a widget. The light, blurred widget background provided by the system is designed for consistency and legibility. Use it whenever possible.

In general, use the system font and system colors for text. The system font is designed for legibility. Choose colors that reflect the semantic meaning of your text, such as labelColor for primary text and secondaryLabelColor for less important text. When you use these system-provided colors, the text your widget displays automatically adopts the appropriate appearance. See Color and Translucency.

If it adds value, let people jump to your app to do more. Your widget should operate independently from your app. However, if people might occasionally need to do more than what your widget offers, make it easy to do so. Don’t include an Open App button that takes space away from your content. Instead, let people click the content itself to see or edit it in your app. In the Calendar widget, for example, people can click an event to open it in the Calendar app.

Never use your widget to open other apps. When someone clicks your app's widget to edit or view content, preserve their context and open only your app.

Pick a good widget name. An app icon and a title appear above each widget’s content. In general, your widget’s name should match your app’s name. If your app offers multiple widgets, however, consider using your app name for the primary widget and clear, concise names for the others. If you use a custom title, consider prefixing it with your app name. The inclusion of your app name instills confidence that the widget is provided by your app.

Let people know when authentication adds value. If your widget provides additional functionality when someone logs into your app, make sure people know about this. For example, an app that shows upcoming reservations might include a message that reads “Sign into App Name to view your reservations.” when they aren’t logged in.

Whenever possible, let people configure your widget in Notification Center. Forcing people to leave Notification Center to configure a widget creates a disconnected experience. For example, the Stocks widget includes an edit mode that lets people quickly find and add market symbols they want to track. An Info button is automatically added into the header area of an editable widget. When clicked, the Info button changes to a Done button, and the widget’s interface changes to present any available editing options.

For developer guidance, see App Extension Programming Guide.