Accordion
A disclosure row that expands to reveal content. Supports optional leading icon and description via boolean visibility properties. Reduced from 24 to 6 variants (Type × State) with color tokens fully connected.
Action List - with Counter
Action-list row with a 32px leading icon, label, trailing chevron, and a trailing Counter pill.
Action List - with Description
Action-list row with a primary label and a secondary description line beneath it.
Action Row
A tappable list row with a leading asset slot, label and description, and a trailing chevron with optional counter. Merges the former Action List, Action List with Counter and Action List with Description.
Ad Carousel
A titled rail that scrolls Ad Space cards sideways, with an optional button in the header. One version, driven by a content slot.
Ad Space
A container for ads, promos, and sponsored placements. Three versions — Receipt, Banner, and Promo — each built around one swappable asset area.
Alert
A persistent status surface with intent, title, description, and an optional action — in Card or Banner style. 30 variants across <code>Type</code> (Neutral / Information / Warning / Error / Success) × <code>Style</code> (Card / Banner) × <code>Content</code> (Default / Header Only / Description Only), with a <code>Leading Container</code> icon slot and a <code>Dismiss Container</code> slot.
Amount Text Field
A display-style numeric input for PHP amount entry in Send Money, Cash-In, and top-up flows. Sits on a single underline, with a label above and supporting text below. Two sizes × four interaction states.
Avatar
A circular display element showing user initials or a profile image. Supports 7 sizes (20px-90px) and 3 types (dark initials, light initials, image). Used when a profile image is unavailable or for visual user identification.
Avatar Group
Stacked or overlapping avatars used to show participant lists — conversation members, shared documents, collaboration indicators.
Badge
A small label used to flag status, counts, or category — supports multiple intents and densities.
Banner
A neutral-background promotional banner with an image or icon, a text stack (preamble, heading, description), and an optional button link.
Bottom Sheet
The bottom-anchored sheet surface used for list pickers, confirmations, forms, and onboarding.
Brand App Bar
A wordmark-only app bar in brand and default surfaces, used where a screen needs identity rather than navigation.
Button
Used to trigger an action when tapped. The button's Call to Action describes the action that will occur. The Large/Medium Buttons are the default size for the GCash app.
Callout
A compact attention strip with neutral, info, warning, or danger intent, optional description, and an optional leading icon.
Carousel Card
A tappable card used inside a horizontally scrolling carousel — banner, title, description, and an optional price. Comes in three versions: Default, With Icon, and Discount.
Carousel Item
A full-bleed banner item for a horizontal carousel — background image, heading, description, and a button. 24 versions across size, appearance, top element, and pressed state.
Chat Field
A message-composer input with a text area, leading attachment, and trailing send action.
Checkbox
A selection control for binary and partial choices. 33 variants across isSelected (true/false/indeterminate) × State (Default/Pressed/Focused/Disabled/Error) × Size (Small/Medium/Large). Code Connect registration pending.
Chip
A 32px pill used for filters, tags, selected values, and pill-styled dropdown triggers.
Countdown
A live timer showing time remaining (days · hours · minutes · seconds) across multiple presentations — full promo card, single bar, segmented boxes, or a compact pill.
Counter
A small numeric badge used to display unread or pending counts on icons and rows.
Date Picker
The full calendar UI used to pick a date — header, weekday row, and a 7×6 day grid.
Date Picker - Group
The calendar surface that hosts the Day/Month/Year picker grids.
Date Picker - Item
The 32×32 selectable day cell rendered inside the Date Picker calendar grid.
Detail Hero
A card hero introducing a transaction or recipient — avatar, title, separator, label-value row and description, on a brand or default surface.
Empty State
A centred no-content surface — visual, header (title + description), and an action. 4 variants across <code>Style</code> (Default/Subtle) × <code>VisualType</code> (Icon/Asset), with a <code>Visual Container</code>, <code>Action Container</code> slot, and a token-bound header.
Footer
A page-bottom region containing partner logos, regulatory disclaimers, and helper links.
Generic Card
A generic surface card used to group content into a tappable unit — header, body slot, and optional footer.
Generic Transaction Card
A transaction-summary card with merchant info, amount, date, and tappable detail surface.
Horizontal Voucher
A 336-wide voucher tile with a 144px hero image, status row, title, price, and validity period.
Inline Message
A full-frame status surface — illustration, title, description, and an optional body — for confirm / processing / error / neutral outcomes. 4 variants across a single <code>Type</code> axis (Success / Loading / Error / Neutral), with an <code>Illustration Container</code> and a <code>Body Container</code> slot.
Inline Text
A label-and-value row with an optional trailing element, description line and text link — used for inline detail pairs within lists and cards.
Input Field
A standard form text-input field — label, body, and four interaction states (default, active, error, disabled).
Labeled Field
A form field with a label-on-top layout, used for plain text and value inputs.
List
A frame containing 8 hardcoded List Item instances stacked with an 8px gap. No component properties, no variants. Functions as a layout example on the sticker sheet rather than a reusable component.
List Item
A single row in a list: leading asset + body text. 3 variants by <code>level</code> (1, 2, 3) that control indent (0 / 16 / 32 px). Composes a <strong>List Item Asset</strong> instance for the leading marker.
List Item Asset
A list-item variant with a leading asset slot — image, icon, or avatar — alongside the label.
Menu Grid
A 2D grid of Service Item tiles used for top-level service navigation. <code>Column</code> (2–5) sets the tiles across, <code>Row</code> (1–5) the tiles down.
Modal
A centered overlay surface used for blocking confirmations and dialogs — header, body, and primary/secondary actions.
Month and Year Picker - Item
The 100×32 selectable cell used inside the Month and Year views of Date Picker - Group.
Overlay
A full-viewport scrim used to dim background content behind sheets, modals, and tooltips. Three strength tiers.
Page Banner
A header variant with the title centered, optional leading and trailing actions on either side.
Progress Bar
A linear progress indicator showing completion percentage; supports determinate and indeterminate modes.
Radio Button
A circular radio control for single-select groups. 39 variants across <code>Style</code> (Default/Check) × <code>State</code> (Default/Pressed/Disabled) × <code>Size</code> (Large/Medium/Small) × <code>isSelected</code> × <code>isError</code>.
Radio Button with Label
A form row pairing a Radio Button with a text label. 39 variants across <code>Style</code> (Default/Check) × <code>State</code> (Default/Pressed/Disabled) × <code>Size</code> (Large/Medium/Small) × <code>isSelected</code> × <code>isError</code> — mirroring the Radio Button atom exactly.
Recipient Field
A form field showing a selected recipient — avatar, name, and contact identifier.
Search Field
A search input field with a leading magnifying-glass icon and an optional clear button.
Section Header
A section-level heading row with preamble, title, counter, description, and optional leading and trailing media.
Segmented Control - Group
A labeled Toggle Segmented Control with optional subtext and a small-avatar group below.
Segmented Control Button
A single tappable segment inside a Segmented Control. 6 variants across <code>State</code> (Default / Pressed / Disabled) × <code>Active</code> (true / false). Active segments fill brand-blue; inactive segments carry a brand-blue outline. (Assessed in the 2026 Working File.)
Select
A trigger field that opens a Select Group of options. 16 variants across <code>Type</code> (Default/Peso) × <code>State</code> (Default/Expanded/Error/Disabled) × <code>isFilled</code>. Composes a Select Field trigger with a Select Group menu.
Select Field
A form field that opens a dropdown of options when tapped — label, value, and chevron.
Select Group
The menu surface that opens when a Select is tapped — a rounded card wrapping a Figma Slot of Select Items. 9 variants across <code>Border Type</code> (Middle Inset / Full Width / None) × <code>Density</code> (Compact / Default / Comfortable).
Select Item
A single selectable row inside a Dropdown popover — label, optional leading icon, and selected/disabled states.
Service Item
A service tile — icon slot plus label and optional description — used inside the home Menu Grid and customizable shortcut surfaces. Type axis adds a "New" badge, an Add (+) overlay, or a Remove (–) overlay over the icon.
Slider
A horizontal slider control with a continuous fill, a 16×16 knob, and a small percentage tooltip above the knob.
Stepper
A progress indicator for multi-step flows, in bullet, circular and dash forms. Merges the former Stepper - Bullet, Stepper - Circular and Stepper - Dash.
Stepper - Circular
A row of numbered circles whose ring arcs indicate progress through a multi-step flow.
Stepper - Dash
A flat segmented progress indicator — a row of rounded dashes where filled dashes mark current and earlier steps.
Subtext Message
A small caption rendered beneath form fields for helper text or validation messages. 8 variants across <code>Status</code> (Default / Success / Error / Disabled) × <code>Size</code> (Small / Default), each with a leading status icon and a <code>#message</code> plus trailing <code>#label</code>. (Assessed in the 2026 Working File.)
Tab Item
A single tab inside Tabs — label, swappable Icon slot, optional Counter and red dot. 24 variants across <code>State</code> (Default/Hover/Disabled) × <code>Orientation</code> (Vertical/Horizontal) × <code>Size</code> (Medium/Large) × <code>Placement</code> (Leading/Trailing) × <code>isSelected</code>.
Table Row
A display-only table row — a leading label and however many data cells you drop into its Columns Slot. Comes in Header and Content roles, each with a disabled state.
Table Scheduling
A display-only scheduled-payment row — a date and total on the first line, then however many label/amount cells you drop into its slot. Default and disabled states.
Table Transaction
A display-only transaction row — a header of column labels, or a content row with a full-width label above however many peso-amount cells you drop into its slot.
Tabs
The Tabs container composes a row of <strong>Tab Item</strong> instances. 12 variants across <code>Orientation</code> (Vertical/Horizontal) × <code>Size</code> (Medium/Large) × <code>Tabs Count</code> (2/3/4).
Terms & Conditions Accordion
A specialized accordion used inside voucher details to disclose terms and conditions.
Text Area
A multi-line text input for longer-form entry — label, body, and character counter.
Title Bar - App
The top-of-screen app bar, with status bar, title row, optional leading and trailing icons, and an optional expanded title block over an image background.
Toast
A transient bottom-anchored message for confirmations and inline alerts, with optional leading icon, description and trailing action. Auto-dismisses after a short delay.
Toast - With Button
A toast variant with a trailing action button used for undo or in-flight confirmations.
Toggle
A binary switch. 18 variants across <code>State</code> (Default / Pressed / Disabled) × <code>Size</code> (Large / Medium / Small) × <code>isSelected</code> (true / false). Vector track + thumb, all colors token-bound.
Toggle - Segmented Control
A 2-option segmented control where the selected segment is filled brand-blue and the unselected segment carries a brand-blue outline.
Toggle - With Label
A toggle paired with a label and an optional subtext message, in a single row. 18 variants mirroring the Toggle atom — <code>State</code> (Default / Pressed / Disabled) × <code>Size</code> (Large / Medium / Small) × <code>isSelected</code> (true / false) — nesting the Toggle instance plus a <code>#label</code> and a composed <code>Subtext Message</code>.
Tooltip
A pointered callout for walkthroughs and contextual hints. Carries a header, a description, and three slots — <code>⤷ AssetSlot</code>, <code>⤷ CloseSlot</code>, <code>⤷ ActionSlot</code>.
Tooltip - Onboarding
Named <code>Onboarding - Tooltip</code> in Figma. A directional tooltip used in onboarding overlays, with a pointer, header, description, and dismiss control. Superseded by <a href="/components/tooltip">Tooltip</a>.
Tooltip Blurred and Transparent
A dark, translucent directional tooltip with a backdrop blur, for use over photographic or high-contrast content.
Tooltip V2
A small floating callout anchored to a target with a directional pointer; ships in eight pointer positions.
Upload File
A file-upload field with a tappable upload affordance, file-name display, and progress/error states.
Vertical Voucher
A 162-wide vertical voucher tile combining a Voucher Asset image with title, description, price, validity, and status badges.
View Only Field
A read-only form field showing a label and value; non-interactive.
Visual Popup
An illustrated centered popup used for promos, success moments, and notable announcements.
Voucher Asset
A ticket-shaped image clipped into a notched frame, used as the visual on voucher placements.
Voucher Card Horizontal
A 336×111 horizontal voucher card with text content on the left and a perforated image frame on the right; ships in four state variants (limited, expiring, used, expired).
Voucher Details
A 336×704 single-instance screen rendering merchant header, voucher content, and optional terms-and-conditions sections.
Actions
Action List - with Counter
Action-list row with a 32px leading icon, label, trailing chevron, and a trailing Counter pill.
Action List - with Description
Action-list row with a primary label and a secondary description line beneath it.
Action Row
A tappable list row with a leading asset slot, label and description, and a trailing chevron with optional counter. Merges the former Action List, Action List with Counter and Action List with Description.
Button
Used to trigger an action when tapped. The button's Call to Action describes the action that will occur. The Large/Medium Buttons are the default size for the GCash app.
Chip
A 32px pill used for filters, tags, selected values, and pill-styled dropdown triggers.
Inputs & Forms
Amount Text Field
A display-style numeric input for PHP amount entry in Send Money, Cash-In, and top-up flows. Sits on a single underline, with a label above and supporting text below. Two sizes × four interaction states.
Chat Field
A message-composer input with a text area, leading attachment, and trailing send action.
Checkbox
A selection control for binary and partial choices. 33 variants across isSelected (true/false/indeterminate) × State (Default/Pressed/Focused/Disabled/Error) × Size (Small/Medium/Large). Code Connect registration pending.
Date Picker
The full calendar UI used to pick a date — header, weekday row, and a 7×6 day grid.
Date Picker - Group
The calendar surface that hosts the Day/Month/Year picker grids.
Date Picker - Item
The 32×32 selectable day cell rendered inside the Date Picker calendar grid.
Input Field
A standard form text-input field — label, body, and four interaction states (default, active, error, disabled).
Labeled Field
A form field with a label-on-top layout, used for plain text and value inputs.
Month and Year Picker - Item
The 100×32 selectable cell used inside the Month and Year views of Date Picker - Group.
Radio Button
A circular radio control for single-select groups. 39 variants across <code>Style</code> (Default/Check) × <code>State</code> (Default/Pressed/Disabled) × <code>Size</code> (Large/Medium/Small) × <code>isSelected</code> × <code>isError</code>.
Radio Button with Label
A form row pairing a Radio Button with a text label. 39 variants across <code>Style</code> (Default/Check) × <code>State</code> (Default/Pressed/Disabled) × <code>Size</code> (Large/Medium/Small) × <code>isSelected</code> × <code>isError</code> — mirroring the Radio Button atom exactly.
Recipient Field
A form field showing a selected recipient — avatar, name, and contact identifier.
Search Field
A search input field with a leading magnifying-glass icon and an optional clear button.
Segmented Control - Group
A labeled Toggle Segmented Control with optional subtext and a small-avatar group below.
Segmented Control Button
A single tappable segment inside a Segmented Control. 6 variants across <code>State</code> (Default / Pressed / Disabled) × <code>Active</code> (true / false). Active segments fill brand-blue; inactive segments carry a brand-blue outline. (Assessed in the 2026 Working File.)
Select
A trigger field that opens a Select Group of options. 16 variants across <code>Type</code> (Default/Peso) × <code>State</code> (Default/Expanded/Error/Disabled) × <code>isFilled</code>. Composes a Select Field trigger with a Select Group menu.
Select Field
A form field that opens a dropdown of options when tapped — label, value, and chevron.
Select Group
The menu surface that opens when a Select is tapped — a rounded card wrapping a Figma Slot of Select Items. 9 variants across <code>Border Type</code> (Middle Inset / Full Width / None) × <code>Density</code> (Compact / Default / Comfortable).
Select Item
A single selectable row inside a Dropdown popover — label, optional leading icon, and selected/disabled states.
Text Area
A multi-line text input for longer-form entry — label, body, and character counter.
Toggle
A binary switch. 18 variants across <code>State</code> (Default / Pressed / Disabled) × <code>Size</code> (Large / Medium / Small) × <code>isSelected</code> (true / false). Vector track + thumb, all colors token-bound.
Toggle - Segmented Control
A 2-option segmented control where the selected segment is filled brand-blue and the unselected segment carries a brand-blue outline.
Toggle - With Label
A toggle paired with a label and an optional subtext message, in a single row. 18 variants mirroring the Toggle atom — <code>State</code> (Default / Pressed / Disabled) × <code>Size</code> (Large / Medium / Small) × <code>isSelected</code> (true / false) — nesting the Toggle instance plus a <code>#label</code> and a composed <code>Subtext Message</code>.
Upload File
A file-upload field with a tappable upload affordance, file-name display, and progress/error states.
View Only Field
A read-only form field showing a label and value; non-interactive.
Feedback & Status
Alert
A persistent status surface with intent, title, description, and an optional action — in Card or Banner style. 30 variants across <code>Type</code> (Neutral / Information / Warning / Error / Success) × <code>Style</code> (Card / Banner) × <code>Content</code> (Default / Header Only / Description Only), with a <code>Leading Container</code> icon slot and a <code>Dismiss Container</code> slot.
Badge
A small label used to flag status, counts, or category — supports multiple intents and densities.
Callout
A compact attention strip with neutral, info, warning, or danger intent, optional description, and an optional leading icon.
Counter
A small numeric badge used to display unread or pending counts on icons and rows.
Empty State
A centred no-content surface — visual, header (title + description), and an action. 4 variants across <code>Style</code> (Default/Subtle) × <code>VisualType</code> (Icon/Asset), with a <code>Visual Container</code>, <code>Action Container</code> slot, and a token-bound header.
Inline Message
A full-frame status surface — illustration, title, description, and an optional body — for confirm / processing / error / neutral outcomes. 4 variants across a single <code>Type</code> axis (Success / Loading / Error / Neutral), with an <code>Illustration Container</code> and a <code>Body Container</code> slot.
Inline Text
A label-and-value row with an optional trailing element, description line and text link — used for inline detail pairs within lists and cards.
Progress Bar
A linear progress indicator showing completion percentage; supports determinate and indeterminate modes.
Subtext Message
A small caption rendered beneath form fields for helper text or validation messages. 8 variants across <code>Status</code> (Default / Success / Error / Disabled) × <code>Size</code> (Small / Default), each with a leading status icon and a <code>#message</code> plus trailing <code>#label</code>. (Assessed in the 2026 Working File.)
Toast
A transient bottom-anchored message for confirmations and inline alerts, with optional leading icon, description and trailing action. Auto-dismisses after a short delay.
Toast - With Button
A toast variant with a trailing action button used for undo or in-flight confirmations.
Containers & Surfaces
Accordion
A disclosure row that expands to reveal content. Supports optional leading icon and description via boolean visibility properties. Reduced from 24 to 6 variants (Type × State) with color tokens fully connected.
Bottom Sheet
The bottom-anchored sheet surface used for list pickers, confirmations, forms, and onboarding.
Generic Card
A generic surface card used to group content into a tappable unit — header, body slot, and optional footer.
Generic Transaction Card
A transaction-summary card with merchant info, amount, date, and tappable detail surface.
Modal
A centered overlay surface used for blocking confirmations and dialogs — header, body, and primary/secondary actions.
Overlay
A full-viewport scrim used to dim background content behind sheets, modals, and tooltips. Three strength tiers.
Tooltip
A pointered callout for walkthroughs and contextual hints. Carries a header, a description, and three slots — <code>⤷ AssetSlot</code>, <code>⤷ CloseSlot</code>, <code>⤷ ActionSlot</code>.
Tooltip - Onboarding
Named <code>Onboarding - Tooltip</code> in Figma. A directional tooltip used in onboarding overlays, with a pointer, header, description, and dismiss control. Superseded by <a href="/components/tooltip">Tooltip</a>.
Tooltip Blurred and Transparent
A dark, translucent directional tooltip with a backdrop blur, for use over photographic or high-contrast content.
Tooltip V2
A small floating callout anchored to a target with a directional pointer; ships in eight pointer positions.
Visual Popup
An illustrated centered popup used for promos, success moments, and notable announcements.
Navigation
Brand App Bar
A wordmark-only app bar in brand and default surfaces, used where a screen needs identity rather than navigation.
Detail Hero
A card hero introducing a transaction or recipient — avatar, title, separator, label-value row and description, on a brand or default surface.
Footer
A page-bottom region containing partner logos, regulatory disclaimers, and helper links.
Page Banner
A header variant with the title centered, optional leading and trailing actions on either side.
Section Header
A section-level heading row with preamble, title, counter, description, and optional leading and trailing media.
Stepper
A progress indicator for multi-step flows, in bullet, circular and dash forms. Merges the former Stepper - Bullet, Stepper - Circular and Stepper - Dash.
Stepper - Circular
A row of numbered circles whose ring arcs indicate progress through a multi-step flow.
Stepper - Dash
A flat segmented progress indicator — a row of rounded dashes where filled dashes mark current and earlier steps.
Tab Item
A single tab inside Tabs — label, swappable Icon slot, optional Counter and red dot. 24 variants across <code>State</code> (Default/Hover/Disabled) × <code>Orientation</code> (Vertical/Horizontal) × <code>Size</code> (Medium/Large) × <code>Placement</code> (Leading/Trailing) × <code>isSelected</code>.
Tabs
The Tabs container composes a row of <strong>Tab Item</strong> instances. 12 variants across <code>Orientation</code> (Vertical/Horizontal) × <code>Size</code> (Medium/Large) × <code>Tabs Count</code> (2/3/4).
Title Bar - App
The top-of-screen app bar, with status bar, title row, optional leading and trailing icons, and an optional expanded title block over an image background.
Data Display
Avatar
A circular display element showing user initials or a profile image. Supports 7 sizes (20px-90px) and 3 types (dark initials, light initials, image). Used when a profile image is unavailable or for visual user identification.
Avatar Group
Stacked or overlapping avatars used to show participant lists — conversation members, shared documents, collaboration indicators.
Carousel Card
A tappable card used inside a horizontally scrolling carousel — banner, title, description, and an optional price. Comes in three versions: Default, With Icon, and Discount.
Carousel Item
A full-bleed banner item for a horizontal carousel — background image, heading, description, and a button. 24 versions across size, appearance, top element, and pressed state.
List
A frame containing 8 hardcoded List Item instances stacked with an 8px gap. No component properties, no variants. Functions as a layout example on the sticker sheet rather than a reusable component.
List Item
A single row in a list: leading asset + body text. 3 variants by <code>level</code> (1, 2, 3) that control indent (0 / 16 / 32 px). Composes a <strong>List Item Asset</strong> instance for the leading marker.
List Item Asset
A list-item variant with a leading asset slot — image, icon, or avatar — alongside the label.
Menu Grid
A 2D grid of Service Item tiles used for top-level service navigation. <code>Column</code> (2–5) sets the tiles across, <code>Row</code> (1–5) the tiles down.
Table Row
A display-only table row — a leading label and however many data cells you drop into its Columns Slot. Comes in Header and Content roles, each with a disabled state.
Table Scheduling
A display-only scheduled-payment row — a date and total on the first line, then however many label/amount cells you drop into its slot. Default and disabled states.
Table Transaction
A display-only transaction row — a header of column labels, or a content row with a full-width label above however many peso-amount cells you drop into its slot.
Promotions
Ad Space
A container for ads, promos, and sponsored placements. Three versions — Receipt, Banner, and Promo — each built around one swappable asset area.
Horizontal Voucher
A 336-wide voucher tile with a 144px hero image, status row, title, price, and validity period.
Terms & Conditions Accordion
A specialized accordion used inside voucher details to disclose terms and conditions.
Vertical Voucher
A 162-wide vertical voucher tile combining a Voucher Asset image with title, description, price, validity, and status badges.
Voucher Asset
A ticket-shaped image clipped into a notched frame, used as the visual on voucher placements.
Voucher Card Horizontal
A 336×111 horizontal voucher card with text content on the left and a perforated image frame on the right; ships in four state variants (limited, expiring, used, expired).
Voucher Details
A 336×704 single-instance screen rendering merchant header, voucher content, and optional terms-and-conditions sections.
Other
Ad Carousel
A titled rail that scrolls Ad Space cards sideways, with an optional button in the header. One version, driven by a content slot.
Banner
A neutral-background promotional banner with an image or icon, a text stack (preamble, heading, description), and an optional button link.
Countdown
A live timer showing time remaining (days · hours · minutes · seconds) across multiple presentations — full promo card, single bar, segmented boxes, or a compact pill.
Service Item
A service tile — icon slot plus label and optional description — used inside the home Menu Grid and customizable shortcut surfaces. Type axis adds a "New" badge, an Add (+) overlay, or a Remove (–) overlay over the icon.
Slider
A horizontal slider control with a continuous fill, a 16×16 knob, and a small percentage tooltip above the knob.