Secondary Elements

Accordion

3 variants

Expandable section for FAQs, filters, and nested settings.

Preview

Audio chrome

3 variants

Play bar for voice notes, podcasts, or in-app audio.

Preview

Avatar

3 variants

Face or initials used on rows, headers, and comments.

Preview

Badge

3 variants

Count or status mark on a tab, avatar, or icon.

Preview

Button

5 variants

A 44-point mobile action used for primary and secondary tasks on iOS and Android.

Preview

Card

3 variants

Raised container for a summary, media, or a tappable destination.

Preview

Carousel

3 variants

Horizontally paged cards or images with snap and dots.

Preview

Checkbox

3 variants

Multi-select mark for lists, filters, and agreement rows.

Preview

Chip

3 variants

Compact filter, suggestion, or status token that can be selected or dismissed.

Preview

Date picker

3 variants

Calendar or spinner for picking a date, and optionally a time.

Preview

Description list

3 variants

Label and value pairs for receipts, profiles, and order details.

Preview

Empty state

3 variants

Illustration, title, and action when a list or search has nothing to show.

Preview

Filter sheet

3 variants

Sheet of chips and toggles for refining a list, with apply and reset.

Preview

Floating action button

3 variants

Circular overlay action for compose, create, or scan on a list screen.

Preview

Grouped list

3 variants

Inset iOS-style or Material grouped list with section titles and footers.

Preview

Image viewer

3 variants

Full-screen photo with pinch zoom, captions, and share.

Preview

Infinite scroll

3 variants

Loads the next page as the list approaches the bottom.

Preview

Number stepper

3 variants

Minus and plus control for quantity, duration, or a small numeric value.

Preview

Offline indicator

3 variants

Banner or chip that the device is offline and changes will sync later.

Preview

OTP field

3 variants

Digit boxes for a one-time passcode, with paste and autofill support.

Preview

PIN pad

3 variants

Numeric pad for unlocking the app or confirming a payment PIN.

Preview

Progress bar

3 variants

Linear or circular progress for uploads, checkout, and onboarding.

Preview

Pull to refresh

3 variants

Drag-down gesture that reloads the current list.

Preview

Radio

3 variants

Single choice inside a grouped list of options.

Preview

Rating

3 variants

Star or score input for reviews and feedback.

Preview

Search results

3 variants

Result list with query highlighting, empty, and recent searches.

Preview

Section header

3 variants

Small title that groups rows inside a list or settings screen.

Preview

Select

3 variants

Opens a list or picker sheet to choose one value from a set.

Preview

Skeleton

3 variants

Placeholder bones shown while a screen's first data is loading.

Preview

Slider

3 variants

Continuous value along a track, for volume, price range, or brightness.

Preview

Stepper

3 variants

Step index for a multi-screen flow such as checkout or KYC.

Preview

Swipe actions

3 variants

Leading and trailing row actions revealed by a swipe, such as archive or pin.

Preview

Switch

3 variants

Binary on/off for a setting, with a sliding thumb.

Preview

Table

3 variants

Dense grid of comparable values, used on iPad more than on phones.

Preview

Text field

3 variants

Collects a short value with a visible label, keyboard type, and validation feedback.

Preview

Video chrome

3 variants

Play, scrub, and fullscreen controls over a video.

Preview