# Widget

> A widget is a small view of an app that lives on the home screen or lock screen and shows timely, glanceable content. Some widgets carry interactive elements.

Page: https://www.appetiteui.com/glossary/widget. Widgets on iOS and Android: glanceable content on the home screen. Also called Home screen widget, App widget, Lock screen widget.

## Why it matters

A widget is seen far more often than the app is opened, so it works only when it gives one useful thing at a glance.

It adapts to a context and a size, so it is designed per size and not scaled from one.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Widgets: system families and accessory widgets | App widgets | Not drawn |
| Sizes | Small accessory widgets up to extra large system families on iPad | Sized by the app widget guide (page not read for figures) | See below |
| Interaction | System family widgets may include interactive elements | Widgets can be configured and updated | See below |

## In Appetite UI

The kit does not draw widgets. The closest it comes is the Dynamic Island and Live Activity components on iOS.

## Example

A weather widget on the home screen shows the temperature and the next hour, and the lock screen version shows only the temperature.

## Common mistakes

- Scaling one design to every size.
- Too much content for a glance.
- A widget that only opens the app with no content of its own.
- Ignoring light and dark and tinted contexts.

## Questions

### What is a widget?

A small view of an app on the home screen, lock screen or other surfaces that displays timely content at a glance.

### Can widgets be interactive?

On Apple platforms system family widgets may include one or more interactive elements.

## Sources

1. [Apple Human Interface Guidelines: Widgets](https://developer.apple.com/design/human-interface-guidelines/widgets)
2. [Android Developers: App widgets](https://developer.android.com/develop/ui/views/appwidgets/overview)

## Related

- Docs: [iOS](https://www.appetiteui.com/docs/ios)
- Article: [How to design a Live Activity and the Dynamic Island in Figma](https://www.appetiteui.com/blog/dynamic-island-live-activity-figma)
- Glossary: [Dynamic Island](https://www.appetiteui.com/glossary/dynamic-island)
- Glossary: [Dark mode](https://www.appetiteui.com/glossary/dark-mode)
- Glossary: [Size classes](https://www.appetiteui.com/glossary/size-classes)