UI element

Primary button

Screens containing primary button.

  1. BookMyShow: Live Events home

    Live Events tab with a photo category rail (Comedy, Music, Adventure, Workshops, Performances), a 'Things To Do In Your City' event card with price and Book Now, and an 'India's Top Events' carousel.

    BookMyShow Live Events home

    View the screen

  2. BookMyShow: Live event detail

    Web-rendered event page with hero photo, genre chips, an 'interested' social counter, date range, start time, age limit, language and venue rows, a popular-artists strip and a Book Now bar with the starting price.

    BookMyShow Live event detail

    View the screen

  3. BookMyShow: Contact detail before payment

    'Please Fill In The Missing Detail' sheet explaining the detail is needed to deliver tickets, with a country-code mobile-number field, a 'Save this detail in the profile for future transactions' checkbox and an enabled red Proceed To Pay button.

    BookMyShow Contact detail before payment

    View the screen

  4. BookMyShow: Live event listing filters

    A full-screen 'Filter' activity with a left rail of seven refinement dimensions — Comedy Format, Date, Language, Price, Distance, Artist, Venue — and a right pane of counted multi-select checkboxes for the selected dimension. Comedy Format offers Stand up Comedy (221), Surprise Act (16), Open Mic Comedy (12), Roast (7), Improv Comedy (6), Sketch (3). The Date dimension offers Today (62), Tomorrow (71), This Weekend (101) and a red 'Choose from calendar' link with a calendar icon. A footer holds Close and Apply All; once a constraint is ticked the left rail shows a count badge and the footer becomes Clear All and an enabled red Apply All.

    BookMyShow Live event listing filters

    View the screen

  5. Cleartrip: Hotel filters

    All filters shows refinement categories and options, with Free cancellation selected, Reset All, and an apply control estimating 117 properties.

    Premium screenshot

    View the screen

  6. Cleartrip: Flight add-ons

    Optional seat, meal, and baggage upgrades; seat selection is unavailable and add-ons may be skipped.

    Premium screenshot

    View the screen

  7. Cleartrip: Flight filters

    Flight-results filter sheet with included airports, stops, airlines, reset controls, and Apply.

    Premium screenshot

    View the screen

  8. Cleartrip: Add an adult traveller

    Empty adult-traveller sheet with gender, given-name, surname, and Done controls.

    Premium screenshot

    View the screen

  9. Cleartrip: Choose hotel dates

    Calendar range selection for hotel check-in and checkout with confirmation.

    Premium screenshot

    View the screen

  10. Cleartrip: Hotel search

    Hotel destination, stay dates, rooms and guests, and Search hotels controls.

    Premium screenshot

    View the screen

  11. Cleartrip: Flight search

    One-way flight criteria showing Bengaluru to New Delhi, departure date, one adult, cabin class, and Search flights.

    Premium screenshot

    View the screen

  12. Cleartrip: Hotel room choices

    Available room type with imagery, amenities, breakfast plan, cancellation terms, price, and Continue.

    Premium screenshot

    View the screen

  13. Cleartrip: Rooms and guests

    Room occupancy controls for adults and children with confirmation.

    Premium screenshot

    View the screen

  14. Cleartrip: Final flight trip review

    Final review sheet summarizing the Bengaluru to New Delhi itinerary and one traveller before Confirm and proceed.

    Premium screenshot

    View the screen

  15. Cleartrip: Optional login

    Cleartrip sign-in prompt with a close path to continue.

    Premium screenshot

    View the screen

  16. Cleartrip: Review flight and fare

    Selected itinerary and Saver fare review with route, schedule, baggage, fee terms, and Continue.

    Premium screenshot

    View the screen

  17. Cleartrip: Choose flight departure date

    Departure-date calendar with daily fare estimates, a selected date, optional return date, and Done.

    Premium screenshot

    View the screen

  18. Cleartrip: Choose a flight fare

    Fare-choice sheet comparing Saver and Value Max benefits and prices.

    Premium screenshot

    View the screen

  19. Cleartrip: Hotel property details

    Hotel imagery, property name and rating, amenities, nightly price, and Select Room.

    Premium screenshot

    View the screen

  20. Cleartrip: Choose trip protection

    Trip Protect offer with benefits, price, accept or decline choice, and Continue.

    Premium screenshot

    View the screen

  21. Cleartrip: Review hotel itinerary

    Selected property, stay dates, room and guest count, room plan, cancellation policy, total, and Continue.

    Premium screenshot

    View the screen

  22. Cleartrip: Flight travellers and class

    Traveller counts for adults, children, and infants plus Economy, Premium Economy, Business, and First choices.

    Premium screenshot

    View the screen

  23. Cleartrip: Hotel traveller details

    Empty traveller identity and contact form with title, first name, last name, mobile number, email address, and Pay now.

    Premium screenshot

    View the screen

  24. Cleartrip: Flight traveller and contact details

    Empty traveller and contact form with Add adult, email, mobile number, optional GST details, and Continue.

    Premium screenshot

    View the screen

  25. District: Movies vertical home with now-showing spotlight

    Movies tab selected in the vertical rail: 'In the Spotlight' hero card for a now-showing film with genre tags and a 'Book tickets' CTA, followed by a "This Week's Releases" poster rail.

    Premium screenshot

    View the screen

  26. District: Movie detail page with booking CTA

    Full-bleed film artwork over a dark scrim with the film title, certificate/duration/genre metadata line, a short synopsis, share and watchlist affordances and a persistent bottom 'Book tickets' bar.

    Premium screenshot

    View the screen

  27. District: Cinema seat map with tier pricing and selection

    Header with film, venue and the chosen date/time, then a scrollable auditorium seat map split by priced tiers (PRIME ₹320, CLASSIC PLUS ₹310, CLASSIC ₹240, LOUNGER ₹270) with one seat highlighted and a bottom bar reading '1 Seat' with a Proceed button.

    Premium screenshot

    View the screen

  28. District: Event detail page with price and booking CTA

    Vertical event artwork with the event name repeated in the header, category tags (food and drinks, nightlife), a date/time line, the venue name with locality, and a bottom bar showing the ₹100 starting price beside a white 'Book tickets' button.

    Premium screenshot

    View the screen

  29. District: Event ticket selection with date, time and cart

    'Choose date and time' with a horizontal date chip row (19–31 Aug) and a time chip, a 'Redeem your pass by paying on District' banner, a 'Choose tickets' section with a named Cover Ticket at ₹100 and a quantity stepper set to 1, and a bottom bar showing ₹100 next to an enabled Checkout button.

    Premium screenshot

    View the screen

  30. District: Mid-flow login bottom sheet gating guest checkout

    A dark bottom sheet titled 'Log in or sign up' with a close (×) control, a +91 mobile-number field, a disabled Continue button, a red 'Login with Zomato' button and the Terms of Service / Privacy Policy footer, presented over a dimmed booking surface.

    Premium screenshot

    View the screen

  31. District: Find a restaurant — booking preferences sheet

    Bottom-sheet form titled 'Find a restaurant' with a close control and a short subtitle, three stacked preference rows — 'No of guests' (2 guests), 'Date' (Today), 'Time' (2:30 PM) — and a footer pairing a text 'Clear filters' action with a filled 'Find restaurants' submit button, over the dimmed collection listing.

    Premium screenshot

    View the screen

  32. Domino’s: Guest home with order modes

    Guest home: preset Koramangala 4th Block location with a Detect Location banner, order-mode row (Delivery 20 MIN, Takeaway, Dine-in, Deliver on train), merchandised pizza cards with prices and Add controls, and Menu/Offers navigation. In dine-in mode the same surface re-binds its header to 'Dine-in at HSR LAYOUTS, ~100 meters' with a CHANGE control.

    Premium screenshot

    View the screen

  33. Domino’s: Pizza menu listing with filters

    Domino's Menu: veg/non-veg and sort filters, category tabs (Paneer Maxxx, Chicken Maxxx, Big Big Pizza, Meals), and product cards showing a pizza name, description, price and an inline Add control.

    Premium screenshot

    View the screen

  34. Domino’s: Cart and order review

    Cart: the added pizza with a quantity stepper, a free-delivery unlock banner, a Frequently Bought Together upsell rail, Apply Coupon, DELIVER NOW versus ADVANCE ORDER scheduling, and the ADD/SELECT ADDRESS call to action.

    Premium screenshot

    View the screen

  35. Domino’s: Guest delivery address form

    Address entry over a map pin: a 'Login to fetch saved addresses' prompt, the resolved Koramangala area line, Building and Address fields, Home/Office/Other labels, Name and Contact Number fields, an 'Ordering for someone else' toggle and Save Address & Continue.

    Premium screenshot

    View the screen

  36. Domino’s: All Restaurants directory for dine-in

    City-first dine-in store directory: an 'All Restaurants' header, a city field resolved to BANGALORE, a Search Restaurant box, an 'All Restaurants' count line, and outlet cards each showing the restaurant name, full street address, opening hours and a SELECT button. Before a city is chosen the same screen shows an empty state, 'We could not find a restaurant near your location! Please select your city and try again.'

    Premium screenshot

    View the screen

  37. Domino’s: Dine-in checkout

    Dine-in presentation of the cart activity: 1 item in Cart with the ordered pizza and a quantity stepper, a Frequently Bought Together rail, a 'Dine-in at HSR LAYOUTS' store row with CHANGE where the address or pickup block would be, a Cash/UPI payment row and a live PLACE ORDER button showing You Pay Rs.576.

    Premium screenshot

    View the screen

  38. EaseMyTrip: Train results

    Loaded train options from New Delhi to Mumbai Central with departure and arrival times, duration, seat availability, and filters.

    Premium screenshot

    View the screen

  39. EaseMyTrip: Cab search

    Cab Search form with Airport Transfer, Outstation, and Hourly trip types; origin and destination fields, Date & Time, Add Return, Search, and offers.

    Premium screenshot

    View the screen

  40. EaseMyTrip: Search hotels

    Hotel search form for choosing a destination, stay dates, guest count, and room count, with an offers section below.

    Premium screenshot

    View the screen

  41. EaseMyTrip: Train search

    Train ticket search for New Delhi to Mumbai Central with departure date and travel class choices, plus access to train-status utilities.

    Premium screenshot

    View the screen

  42. EaseMyTrip: Flight search

    Flight form for a Hyderabad-to-Bengaluru route with departure date, optional return, traveller and economy-cabin settings, fare options, and Search.

    Premium screenshot

    View the screen

  43. EaseMyTrip: Hotel payment

    Hotel payment step with wallet option, blank card-payment fields, secure-payment notice, and final payment action.

    Premium screenshot

    View the screen

  44. EaseMyTrip: Bus search

    Bus Search hub with travel tabs, origin and destination fields, departure date shortcuts, Search, travel guidance, and Offers & Deals.

    Premium screenshot

    View the screen

  45. EaseMyTrip: Hotel property details

    Property detail view with photos, identity, rating, location, booking terms, stay dates, hotel information, price, and room-selection action.

    Premium screenshot

    View the screen

  46. EaseMyTrip: Choose a hotel room and rate

    Room and rate selection comparing available room types, meal plans, booking terms, amenities, and per-night prices.

    Premium screenshot

    View the screen

  47. EaseMyTrip: Review hotel guest and contact details

    Loaded hotel review with stay and room details, empty contact and primary-guest fields, total price, and Continue Booking.

    Premium screenshot

    View the screen

  48. EaseMyTrip: Train booking review and IRCTC ID

    Review of the selected New Delhi to Mumbai Central train with an empty IRCTC User ID field, boarding station, fare total, and payment action.

    Premium screenshot

    View the screen

  49. EaseMyTrip: Cab transfer review and traveller details

    Transfer Review with trip and vehicle summary, traveller name fields, pickup and drop addresses, promo code, amount, and Continue Booking.

    Premium screenshot

    View the screen

  50. MakeMyTrip: Account menu drawer (guest, not signed in)

    The app's account menu, slid over a dimmed home shell. For a guest it leads with a blue "Login/Sign-up now — Login for best deals & offers" call to action instead of an account name, then a three-tile shortcut row (My Trips, Profile, Wishlists — Wishlists carrying a red badge dot), an MMT ICICI Card offer row ("Limited time offer – Zero Joining fee", New), a Where2Go inspiration row ("Ideas for your next trip"), a five-item utility list (Customer Support, Notifications, Gift Cards, My Reviews, Refer & Earn), a supply-side "Get Started with Hosting — List your property & earn extra income" row, and the start of a Settings block beginning with Country, clipped by the drawer fold.

    Premium screenshot

    View the screen

  51. MakeMyTrip: Cabs Review Your Ride

    The pre-payment cab review: trip address and schedule with Edit, the selected vehicle with rating, fuel type and seats, free-cancellation terms, a detailed Inclusions & Exclusions list of per-minute and per-kilometre overage rates and which tolls, parking and state taxes are included or excluded, a Policies link, a Coupon & Offers block, and the Part Pay / Full Pay / PAY NOW bar. The wording of the inclusions block and the two payment amounts differ by cab product: the hourly-rental and airport captures exclude tolls, parking and state tax, while the intercity Outstation capture states that tolls, state tax and driver allowance are included and quotes a per-kilometre rate beyond an included distance.

    Premium screenshot

    View the screen

  52. MakeMyTrip: Mobile-number login gate

    Authentication interception: a 'Login to Book Your Visa' header, a country-code selector defaulting to +91, an empty mobile-number field, a CONTINUE button and the privacy-policy / user-agreement consent line.

    Premium screenshot

    View the screen

  53. MakeMyTrip: Cab Search — trip entry

    The shared Cabs entry form: three product tabs (Outstation, Airport, Hourly Rentals) with Airport active, a Ride Guarantee promise strip, FROM and TO address fields with a swap control, a TRIP START date and time, a SEARCH button and an Offers band below the form.

    Premium screenshot

    View the screen

  54. MakeMyTrip: Tours & Attractions landing

    The activities line-of-business entry: an MMT Experience Pass promo banner claiming multi-activity savings, a 'Where are you going?' destination search box with SEARCH, and a Trending Destinations grid (Singapore, Dubai, Paris, Bangkok, London, Tokyo, Phuket, Kuala Lumpur).

    Premium screenshot

    View the screen

  55. MakeMyTrip: Hotels Select Room

    Room and rate-plan chooser: date/guest header with Modify, Free Cancellation and Breakfast Included filters, a room card with size, view, bed and bathroom attributes, and competing rate plans with prices, a Selected marker and CONTINUE.

    Premium screenshot

    View the screen

  56. MakeMyTrip: Hotels & Homestays search entry

    Stay-search form: By Night / Hourly Stays / Nearby Getaways tabs, a OneCircle Rewards promo, the city field, check-in and check-out dates, room/guest occupancy and a SEARCH button.

    Premium screenshot

    View the screen

  57. MakeMyTrip: Experience Pass Review Booking

    Pre-payment review of the pass booking: product name and tier, traveller count, TOTAL COST inclusive of taxes, an activation-window note, a Cancellation Policy block explaining the full refund before first activity booking and non-refundability after, an Add Traveller Details block with a passport-match warning, and the total with CONTINUE.

    Premium screenshot

    View the screen

  58. MakeMyTrip: Single-activity detail

    One activity's page: photo hero with a share control, name and destination, tabbed sections (About, Highlights, Activity Options, Traveller Videos), an About Activity block with duration and suitability, a description, and a sticky 'Starting From' price with CONTINUE.

    Premium screenshot

    View the screen

  59. MakeMyTrip: Activity booking — Select Date

    A month calendar for choosing the visit date, with weekday headers, the current selection highlighted, FROM DATE and TO DATE summary fields and a DONE confirm button.

    Premium screenshot

    View the screen

  60. MakeMyTrip: Hotels card payment — card entry

    Card-instrument form: Total Due header, an online-transaction warning with a Know more link, empty ENTER CARD NUMBER, MM/YY and CVV fields, and a PAY control that stays disabled while the form is empty.

    Premium screenshot

    View the screen

  61. MakeMyTrip: Hotel property detail

    One property's page: photo hero with a photo count, name, review rating, locality, a property overview blurb, the stay dates and occupancy, the nightly fare with taxes, a wishlist heart and a SELECT ROOM call to action.

    Premium screenshot

    View the screen

  62. MakeMyTrip: Hotels Review Booking

    Pre-payment stay summary: property name and locality, check-in and check-out with night count, guests and rooms, the selected room and meal plan, a non-refundable notice, an Inclusions & Cancellation Policy link, a recommended Addons block, and the total with CONTINUE.

    Premium screenshot

    View the screen

  63. MakeMyTrip: Select Preferences — traveller count

    Traveller-count chooser for the selected pass: the pass name and date in the header, Adult and Child rows with age bands, per-traveller prices and increment/decrement steppers, an age-band advisory note, and a running total with CONTINUE.

    Premium screenshot

    View the screen

  64. MakeMyTrip: Experience Pass detail

    The multi-activity pass product page: branded hero, pass name and destination, a starting per-adult price, an activation validity line, tabbed sections (MMT Pass, Choices (25), Pass Options, Pass Details), an About block describing the savings, and a sticky starting price with CONTINUE.

    Premium screenshot

    View the screen

  65. SNITCH: Shirt product detail page

    Product page for a burgundy solid twill shirt: large product photography, product name and price, a star rating with review count that opens the reviews panel, a full-width ADD TO BAG button, and further down the same scrolling page a YOU MAY ALSO LIKE recommendation grid of shirt tiles with prices, struck-through original prices, colour swatches and wishlist hearts; tapping a tile opens that product's own full detail page. The same template serves products opened from a curated collection tile and from a search results tile.

    Premium screenshot

    View the screen

  66. SNITCH: Shopping bag with price details

    BAG screen with one line item (Burgundy Solid Twill Shirt, M, quantity 1, Rs 1219), MOVE TO WISHLIST and delete controls, a locked coupons and gift cards row, a PRICE DETAILS breakdown of bag total, coupon discount and grand total, a YOU MAY ALSO LIKE carousel, and the SELECT ADDRESS TO CONTINUE call to action.

    Premium screenshot

    View the screen

  67. SNITCH: Login or signup phone-OTP gate

    LOGIN OR SIGNUP bottom sheet over the bag: the line 'Unlock coupons, profile and much more', an empty phone field prefixed +91, a black VERIFY button, and a terms-of-service and privacy-policy consent line.

    Premium screenshot

    View the screen

  68. BookMyShow: Movie detail page

    Film synopsis page with poster hero, star rating and vote count, runtime/genre/language/format chips, an accessibility note, offer strip, review hashtags and a red Book Tickets call to action.

    Premium screenshot

    View the screen

  69. BookMyShow: Age advisory consent

    Bottom sheet stating the movie is rated 'A' and that entry is for viewers 18 years and above, with a single Continue button.

    Premium screenshot

    View the screen

  70. BookMyShow: How many seats

    Sheet asking 'How many seats?' with a 1-10 quantity picker and four price tiers (Recliner 380, Prime Plus 280, Prime 250, Classic 99) above a Select Seats button.

    Premium screenshot

    View the screen

  71. BookMyShow: Cinema terms and conditions

    Numbered cinema terms covering seat layout accuracy, ticket transfer, outside food, RGB purity and cancellation, with Cancel and Accept buttons.

    Premium screenshot

    View the screen

  72. BookMyShow: Cancel transaction dialog

    Modal dialog asking 'Are you sure you want to cancel your transaction?' with NO and YES actions over the dimmed booking summary.

    Premium screenshot

    View the screen

  73. BookMyShow: Live event quick preview sheet

    Bottom sheet raised over the dimmed Comedy Shows listing when an event card is tapped: event poster with a Live badge, the interested count, title 'Gaurav Gupta Live - India Tour', the Comedy Shows genre line, a one-line show description, the next show date and time, a price-from line, the Bengaluru venue with its distance, a '1+ Venues' hint, and the two exits Know More and Book Now.

    Premium screenshot

    View the screen

  74. District: Phone sign-in wall with guest skip

    Dark launch sign-in screen: brand mark, 'For all your going out plans', 'LOG IN OR SIGN UP', a +91 mobile-number field, a disabled Continue button, a red 'Login with Zomato' button and the Terms of Service / Privacy Policy footer.

    Premium screenshot

    View the screen

  75. District: Restaurant page with offers, table booking and bill payment

    Photo strip with a 'View gallery' entry, restaurant name with cuisine, price-for-two and locality metadata, quick chips, an Offers/'Offers for today' section with a discount card, and a two-button bottom bar: 'Book a table' and 'Pay bill'.

    Premium screenshot

    View the screen

  76. Domino’s: Mobile number login with OTP

    Launch login wall: brand header with a Skip escape, three benefit chips (Personalised Offers, Loyalty Points, Easy Reordering), a +91 mobile-number field, a terms-and-conditions line and the Send OTP button.

    Premium screenshot

    View the screen

  77. Domino’s: Takeaway outlet picker near you

    Pickup store chooser: a 'Restaurant(s) Near Your Location' list under the current locality, each outlet card showing the restaurant name, full street address, opening hours, walking/driving distance, a View on Map link and a SELECT button, with some outlets badged NEW DRIVE-N-PICK.

    Premium screenshot

    View the screen

  78. Domino’s: Takeaway pickup checkout

    Pickup checkout on the cart activity: the ordered pizza with a quantity stepper, a Frequently Bought Together rail, a 'Takeaway | Restaurant' outlet block with CHANGE instead of a delivery address, a bill with no delivery fee, and a live PLACE ORDER button with Cash/UPI preselected.

    Premium screenshot

    View the screen

  79. Domino’s: Deliver on Train PNR entry

    Deliver on Train header over a PIZZA ON YOUR SEAT explainer ('We will deliver your favourite Pizza right on your train seat while you travel'), an 'Enter PNR to get started' card with an empty PNR field, the hint 'Valid PNR Number is Mandatory', an 'I agree to the IRCTC Ordering Terms & Conditions' checkbox and a green SUBMIT button, an IRCTC ORDER HISTORY row, and an IRCTC T&C block listing catered-station and 2-hour lead rules, 12:00-23:00 delivery hours and the 2-hour cancellation window, with READ MORE.

    Premium screenshot

    View the screen

  80. Domino’s: Pizza customisation with size, crust and toppings

    Margherita configuration page: a hero pizza photo, the product name with 'Classic delight with 100% real mozzarella cheese', a Change Size block offering Regular (Serves 1) at Rs 119, Medium (Serves 2) at Rs 239 preselected and Large (Serves 4) at Rs 449, then a Change Crust block starting with New Hand Tossed at Rs 239, and a sticky footer summarising 'Medium | New Hand Tossed' with a priced Rs 239 Add button. Scrolling further on this same surface reveals the remaining crusts (100% Wheat Thin Crust Rs 289, Cheese Burst Rs 339, Fresh Pan Pizza Rs 289, Classic Hand Tossed greyed out as unavailable, Korean Sweet Chilli Cheese Burst Rs 339, Hot n Fiery Cheese Burst Rs 339, Creamy Makhani Cheese Burst Rs 339), an 'Add Extra cheese to crust' add-on at +Rs 75, eight veg toppings at +Rs 60 each (Crisp Capsicum, Fresh Tomato, Paneer, Red Pepper, Jalapeno, Black Olive, Grilled Mushrooms, Onion) and seven non-veg toppings at +Rs 75 each (Pepper Barbecue Chicken, Peri-Peri Chicken, Grilled Chicken Rasher, Chicken Sausage, Chicken Tikka, Chicken Pepperoni, Chicken Keema).

    Premium screenshot

    View the screen

  81. SNITCH: Collection filter and sort

    A bottom sheet over the dimmed collection grid listing collapsed facet groups: SORT BY, CATEGORY, SIZE, COLOR, PATTERN, FIT and CUSTOMER REVIEW, each with an expand control. A CLEAR action and an APPLY action carrying a live result count sit pinned at the bottom, showing that curated collections get the same full faceting controls as the standard product listing.

    Premium screenshot

    View the screen

More examples with Premium

Premium unlocks the remaining screenshots.