Components

Every component, on both platforms.

Real recordings from an iPhone 17 and a Pixel 8, played back at one scale: Liquid Glass on iOS 26, Material 3 Expressive on Android.

Buttons

5 components

Button

Button
Details

The main action on a screen, like Continue.

iPhone 17111.3 × 44 pt
Pixel 878.9 × 40 dp
  • Android a real Material 3 Expressive component, drawn by Jetpack Compose

Icon button

IconButton
Details

A round button with just an icon.

iPhone 1744 × 44 pt
Pixel 840 × 40 dp

Animated icon button

AnimatedIconButton
Details

A round button whose icon changes smoothly.

iPhone 1756 × 56 pt
Pixel 856 × 56 dp

Add button with quantity

QuantityStepper
Details

An Add button that turns into minus and plus.

iPhone 17132 × 44 pt
Pixel 8123.8 × 40 dp
  • Android a real Material 3 Expressive component, drawn by Jetpack Compose

Action menu button

FabMenu
Details

One round button that fans out into several.

iPhone 1772 × 233.7 pt
Pixel 8129.1 × 251.4 dp

Forms

7 components

Switch

Switch
Details

An on/off switch for a setting.

iPhone 1763 × 28 pt
Pixel 852.2 × 32 dp
  • iOS the real UIKit control, so iOS 26 draws Liquid Glass on it
  • Android a real Material 3 Expressive component, drawn by Jetpack Compose

Stepper

Stepper
Details

Minus and plus buttons to change a number.

iPhone 1793 × 94.3 pt
Pixel 896 × 108.6 dp
  • iOS the real UIKit control, so iOS 26 draws Liquid Glass on it
  • Android a real Material 3 Expressive component, drawn by Jetpack Compose

Segmented control

SegmentedControl
Details

Two to five options side by side, one selected.

iPhone 17354 × 32 pt
Pixel 8363.4 × 40 dp
  • iOS the real UIKit control, so iOS 26 draws Liquid Glass on it
  • Android a real Material 3 Expressive component, drawn by Jetpack Compose

Slider

Slider
Details

Drag along a line to pick a value.

iPhone 17353 × 33 pt
Pixel 8361.1 × 44.2 dp
  • iOS the real UIKit control, so iOS 26 draws Liquid Glass on it
  • Android a real Material 3 Expressive component, drawn by Jetpack Compose

Date picker

DateTimePicker
Details

Pick a date, a time, or both.

iPhone 17197.3 × 36 pt
Pixel 8249.1 × 40 dp
  • iOS the real UIKit control, so iOS 26 draws Liquid Glass on it
  • Android a real native Android control, not an approximation

Filter chips

Chips
Details

Small tags people tap to filter a list.

iPhone 17258.3 × 76 pt
Pixel 8291.8 × 32 dp
  • Android a real Material 3 Expressive component, drawn by Jetpack Compose
SearchBar
Details

A search box with a magnifier icon.

iPhone 17330 × 40 pt
Pixel 8339.4 × 56 dp
  • Android a real Material 3 Expressive component, drawn by Jetpack Compose

Images & media

1 component

Media player

MediaControls
Details

Play, pause and skip, with a progress bar.

iPhone 17300 × 218.7 pt
Pixel 8300.2 × 233.5 dp

Cards & layout

2 components

Card

Card
Details

A rounded box that groups related things.

iPhone 17354 × 78 pt
Pixel 8363.4 × 84.6 dp

Panel

Surface
Details

A full-width background to group content on.

iPhone 17370 × 511 pt
Pixel 8379.4 × 542.5 dp

Charts & status

1 component

Status pill

StatusPill
Details

A small live status that grows into a card.

iPhone 17300 × 128 pt
Pixel 8300.2 × 128 dp

Pop-ups

3 components

Bottom sheet

BottomSheet
Details

A panel that slides up from the bottom of the screen.

iPhone 17400 × 402.3 pt
Pixel 8411.4 × 446.5 dp

Action sheet

ActionSheet
Details

A titled list of choices for one item, such as Share or Delete, over the screen.

iPhone 17334.7 × 335 pt
Pixel 8411.4 × 267.8 dp
  • iOS the real UIKit control, so iOS 26 draws Liquid Glass on it

Menu

Menu
Details

A short list of actions that opens next to a button.

iPhone 17266.7 × 245 pt
Pixel 8221 × 275.8 dp
  • Android a real native Android control, not an approximation

These are the pieces. The App Builder puts them together.

Arrange them on screens, draw the navigation between them, and your coding agent generates the app.

Open the App Builder