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
A row primitive used in lists of tappable rows — title, optional trailing CTA, and chevron.
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.
Ad Space
A canonical surface for ads, promos, and sponsored placements — supports banner, promo, and hero size families with a single content slot.
Alert
A persistent in-flow status banner with intent (info, success, warning, danger), title, description, and optional CTA.
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 — Large is a 53px headline, Default prefixes a peso glyph with a 35px amount.
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.
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 - Discount Card
A discount-themed card variant inside a horizontally scrolling carousel — hero image, percent-off badge, and label.
Carousel - Item
A horizontal-scroll item used as a building block for product/promo carousels.
Carousel Card
A tappable card used inside a horizontally scrolling carousel — image, title, and optional description.
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.
Dropdown
A trigger button that opens a popover surface containing selectable options.
Dropdown Item
A single selectable row inside a Dropdown popover — label, optional leading icon, and selected/disabled states.
Dropdown Item Group
The popover surface that opens when a Dropdown is tapped — a stack of Dropdown Items in a rounded card with a drop shadow.
Empty State
A full-frame empty-state pattern — illustration or icon, title, description, and optional CTA.
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.
Header
The top-of-screen header pattern with title, leading back action, and trailing actions.
Header - Centered
A header variant with the title centered, optional leading and trailing actions on either side.
Header - Transaction
A transaction-detail header with the merchant logo, transaction amount, and date.
Header - With Logo
A header variant featuring the GCash wordmark instead of a title; trailing actions optional.
Horizontal Voucher
A 336-wide voucher tile with a 144px hero image, status row, title, price, and validity period.
Inline Message
A subtle inline status message rendered alongside form fields or content — neutral, info, success, or error intent.
Inline Text
A single-line text element used for inline labels, captions, or value pairs within a row.
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 icon-and-label tiles used for top-level service navigation.
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.
Onboarding - Tooltip
A directional tooltip used in onboarding overlays, with a pointer, header, description, and dismiss control.
Overlay
A full-viewport scrim used to dim background content behind sheets, modals, and tooltips.
Progress Bar
A linear progress indicator showing completion percentage; supports determinate and indeterminate modes.
Radio Button
A circular radio control used inside single-select groups; supports default, selected, and disabled.
Radio Button with Label
A form row pairing a Radio Button with a text label. 4 variants across a <code>size</code> property with mixed values: <code>default</code>, <code>large</code>, <code>default - error</code>, <code>large - error</code>. Only the unselected state is documented across sizes.
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.
Select Field
A form field that opens a dropdown of options when tapped — label, value, and chevron.
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 - Bullet
A row of dot markers indicating progress through a multi-step flow, with the current step using a larger emphasis dot.
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.
Tab Item
A single tab inside the Tabs component — label, optional leading icon, and active/inactive/disabled states.
Table
A structured table primitive for displaying rows of label/value or column-aligned data.
Table - Scheduling
A scheduled-payment row with a date-and-amount headline plus an optional grid of label/value detail pairs.
Table - Transaction
A transaction row showing label/value pairs in a structured table layout.
Tabs
The Tabs container composes a row of <strong>Tab Item</strong> atoms and manages the active index. Currently exposes 3 variants split by <code>tabsCount</code> (2 / 3 / 4). Figma component is currently named singular "Tab" — should be renamed "Tabs".
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
A small section header with a title, optional subtitle, and an optional trailing action.
Toast
A transient bottom-anchored message used for confirmations and inline alerts; 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 control with on, off, and disabled states.
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 optional helper text in a single row.
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
A row primitive used in lists of tappable rows — title, optional trailing CTA, and chevron.
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.
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 — Large is a 53px headline, Default prefixes a peso glyph with a 35px amount.
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.
Dropdown
A trigger button that opens a popover surface containing selectable options.
Dropdown Item
A single selectable row inside a Dropdown popover — label, optional leading icon, and selected/disabled states.
Dropdown Item Group
The popover surface that opens when a Dropdown is tapped — a stack of Dropdown Items in a rounded card with a drop shadow.
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 used inside single-select groups; supports default, selected, and disabled.
Radio Button with Label
A form row pairing a Radio Button with a text label. 4 variants across a <code>size</code> property with mixed values: <code>default</code>, <code>large</code>, <code>default - error</code>, <code>large - error</code>. Only the unselected state is documented across sizes.
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.
Select Field
A form field that opens a dropdown of options when tapped — label, value, and chevron.
Text Area
A multi-line text input for longer-form entry — label, body, and character counter.
Toggle
A binary switch control with on, off, and disabled states.
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 optional helper text in a single row.
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 in-flow status banner with intent (info, success, warning, danger), title, description, and optional CTA.
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 full-frame empty-state pattern — illustration or icon, title, description, and optional CTA.
Inline Message
A subtle inline status message rendered alongside form fields or content — neutral, info, success, or error intent.
Inline Text
A single-line text element used for inline labels, captions, or value pairs within a row.
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.
Toast
A transient bottom-anchored message used for confirmations and inline alerts; 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.
Onboarding - Tooltip
A directional tooltip used in onboarding overlays, with a pointer, header, description, and dismiss control.
Overlay
A full-viewport scrim used to dim background content behind sheets, modals, and tooltips.
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
Footer
A page-bottom region containing partner logos, regulatory disclaimers, and helper links.
Header
The top-of-screen header pattern with title, leading back action, and trailing actions.
Header - Centered
A header variant with the title centered, optional leading and trailing actions on either side.
Header - Transaction
A transaction-detail header with the merchant logo, transaction amount, and date.
Header - With Logo
A header variant featuring the GCash wordmark instead of a title; trailing actions optional.
Stepper - Bullet
A row of dot markers indicating progress through a multi-step flow, with the current step using a larger emphasis dot.
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 the Tabs component — label, optional leading icon, and active/inactive/disabled states.
Tabs
The Tabs container composes a row of <strong>Tab Item</strong> atoms and manages the active index. Currently exposes 3 variants split by <code>tabsCount</code> (2 / 3 / 4). Figma component is currently named singular "Tab" — should be renamed "Tabs".
Title Bar
A small section header with a title, optional subtitle, and an optional trailing action.
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 - Discount Card
A discount-themed card variant inside a horizontally scrolling carousel — hero image, percent-off badge, and label.
Carousel - Item
A horizontal-scroll item used as a building block for product/promo carousels.
Carousel Card
A tappable card used inside a horizontally scrolling carousel — image, title, and optional description.
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 icon-and-label tiles used for top-level service navigation.
Table
A structured table primitive for displaying rows of label/value or column-aligned data.
Table - Scheduling
A scheduled-payment row with a date-and-amount headline plus an optional grid of label/value detail pairs.
Table - Transaction
A transaction row showing label/value pairs in a structured table layout.
Promotions
Ad Space
A canonical surface for ads, promos, and sponsored placements — supports banner, promo, and hero size families with a single content slot.
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
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.