Property Naming Guidelines

At a Glance

The rules that decide 90% of naming calls. If you remember nothing else, remember these.

PascalVariant · Text · Slot names

camelBoolean properties

4Verb prefixes · is has can should

TitleProperty values

StateInteraction — never Status

StatusMeaning — never State

1Responsibility per property

4Property types · Variant Boolean Text Slot

Source of truth. All naming follows the team's Property Naming Guidelines in Notion: Property Naming Guidelines →. This page is the assessment-side mirror; when the two disagree, Notion wins.

Component Property Types

A cheat-sheet for quick reference. Every property is one of four types — knowing which decides its casing and how it's named.

Category	Description	Examples	Use case
Variant	Defines variations of a component, allowing designers to switch between them.	Type · Size (sm, md, lg) · Device (Mobile, Tablet) · Status	Structured changes, such as different button styles or states.
Boolean	Toggles visibility, states, or features within a component.	isVisible · isExpanded · isDisabled — true / false	On/off states, e.g. showing/hiding icons, enabling/disabling inputs.
Text	Stores and displays textual or numerical values dynamically.	Label · Placeholder · Value	Labels, dynamic text content, and numeric properties like badge counts.
Slot	Allows inserting or swapping different subcomponents inside a parent component.	Button · Card · Modal	Embedding complex subcomponents, like placing a badge inside a card.

1 · Variant Properties

The core variations of a component — the biggest visual differences, the related components within one component set. PascalCase names, Title Case values.

Property	Example values	Applies to	Notes
Type	Primary, Secondary, Tertiary	Buttons, Badges, Alerts	Highest hierarchy of component variants
State	Default, Hover, Pressed, Active, Disabled	Buttons, Inputs	Interaction behaviors
Size	Small, Medium, Large, Xlarge	Buttons, Inputs, Modals, Avatars	Standard sizes across components
Width	Full, Fixed, Compact	Buttons, Cards, Modals	Defines width behavior
Height	Short, Regular, Tall	Modals, Dropdowns	Adjusts vertical scaling
Spacing	Compact, Comfortable, Spacious	Lists, Menus, Grids	Defines gaps between elements
Density	Compact, Comfortable, Expanded, Spacious	Lists, Tables, Toolbars	Adjusts padding, row height & control spacing
Color Scheme	Dark, Brand A, Brand B	All components	Overall color theming customisation
Border Radius	Sharp, Soft, Rounded, Circle	Avatar, Cards, Buttons, Inputs	Controls corner roundness
Status	Default, Success, Warning, Error, Info	Alerts, Badges, Forms	Defines semantic meaning
Appearance	Filled, Outlined, Soft, Elevated	Buttons, Cards	Defines rendering style
Shape	Square, Rounded, Pill, Circle	Buttons, Avatars	Defines corner treatment
Orientation	Horizontal, Vertical	Tabs, Lists	Defines layout direction
Placement	Top, Bottom, Left, Right	Tooltip, Popover	Defines placement
Alignment	Left, Center, Right	Typography, Layout	Defines alignment
Tone	Neutral, Positive, Warning, Negative	Alerts	Defines semantic tone
Elevation	None, 1, 2, 3, 4, 5	Cards, Dialogs	Defines elevation level
Mode	View, Edit, Preview	Forms, Editors	Defines operating mode
Selection	Single, Multiple	Lists, Tables	Defines selection behavior

Standard property — casing

Use PascalCase for all standard property names.

✅ Recommended

Variant · Size · State · Status · Appearance · Shape · Orientation · Placement · Density · Theme · Mode · HelperText · ErrorMessage · BadgeCount

❌ Avoid

variant · size · state · status · appearance · shape · orientation · placement · density · theme · mode · Helper Text · Error Message · Badge Count

2 · Boolean Properties

Binary on/off features. Use lowerCamelCase with a verb prefix. Every boolean is one of four kinds — a state, the presence of content, a capability, or a configurable behavior.

Prefix	Purpose	Examples
is	Current state or condition	isDisabled · isLoading · isSelected
has	Presence of content or child elements	hasLeadingIcon · hasBadge · hasFooter
can	Capability or permission	canDrag · canDismiss · canResize
should	Configurable behavior	shouldWrap · shouldAnimate · shouldCloseOnSelect

Use positive names — isDisabled, never disable / notVisible / hideBadge. Values are always true / false.

Full boolean catalog

The approved boolean vocabulary, grouped by kind. Reuse these before inventing a new one.

State — is* (32)

Property	Applies to	Purpose
isDisabled	Buttons, Fields, Selects, Toggles, Menus	Controls whether the component is interactive.
isLoading	Buttons, Cards, Dialogs, Tables	Displays a loading state while content is processing.
isSelected	Tabs, Cards, Menu Items, Segmented Controls	Indicates the component is currently selected.
isChecked	Checkboxes, Switches	Indicates whether the control is checked.
isIndeterminate	Checkboxes, Progress Indicators	Represents a partially selected or unknown state.
isExpanded	Accordions, Sidebars, Tree Views	Controls whether collapsible content is expanded.
isCollapsed	Accordions, Panels	Indicates collapsed content. Avoid using together with `isExpanded`.
isOpen	Dropdowns, Menus, Popovers, Modals	Controls whether an overlay is visible.
isActive	Navigation Items, Tabs, Buttons	Indicates the currently active item.
isFocused	Inputs, Buttons	Displays the focused state.
isHovered	Interactive Components	Displays the hover state.
isPressed	Buttons, Icon Buttons	Displays the pressed state.
isVisited	Links	Indicates a previously visited link.
isReadOnly	Inputs, Textareas, Selects	Prevents editing while keeping content selectable.
isRequired	Inputs, Forms	Indicates the field is mandatory.
isOptional	Forms	Explicitly marks optional fields.
isInvalid	Inputs, Forms	Indicates validation has failed.
isValid	Inputs, Forms	Indicates validation passed.
isError	Inputs, Alerts	Shows an error state. Prefer `Status = Error` where applicable.
isSuccess	Alerts, Toasts	Shows a success state.
isWarning	Alerts, Banners	Shows a warning state.
isSticky	Headers, Toolbars	Keeps the component fixed during scrolling.
isDraggable	Cards, Rows, Lists	Enables drag interactions.
isResizable	Panels, Tables	Allows resizing.
isScrollable	Lists, Containers	Enables scrolling behavior.
isDismissible	Alerts, Toasts, Banners	Allows the user to dismiss the component.
isClosable	Dialogs, Drawers, Modals	Shows a close action.
isEditable	Text Fields, Tables	Allows editing.
isClickable	Cards, Tiles	Makes the component clickable.
isSkeleton	Cards, Lists, Tables	Displays placeholder loading UI.
isVisible	Any component	Controls visibility.
isHidden	Any component	Hides the component. Avoid pairing with `isVisible`.

Content — has* (25)

Property	Applies to	Purpose
hasLeadingIcon	Buttons, Inputs, Chips	Displays an icon before the label.
hasTrailingIcon	Buttons, Inputs	Displays an icon after the label.
hasAvatar	List Items, Cards	Displays an avatar.
hasImage	Cards, Empty States	Displays an image.
hasIllustration	Empty States, Onboarding	Displays an illustration.
hasThumbnail	Lists, Cards	Displays a thumbnail.
hasBadge	Navigation, Icons	Displays a badge.
hasCounter	Tabs, Navigation	Displays a numeric counter.
hasLabel	Inputs, Toggles	Displays a label.
hasDescription	Cards, Alerts	Displays supporting description text.
hasHelperText	Inputs	Displays helper text.
hasValue	Inputs	The field holds entered content. Use only where the filled state changes the component’s geometry — otherwise derive it from value presence in code rather than adding a variant axis.
hasSupportingText	Cards, Lists	Displays supporting content.
hasPrefix	Inputs	Displays leading content inside the field.
hasSuffix	Inputs	Displays trailing content inside the field.
hasDivider	Lists, Menus	Displays a divider.
hasBorder	Cards, Containers	Displays a border.
hasShadow	Cards, Modals	Displays elevation shadow.
hasHeader	Cards, Panels	Displays a header section.
hasFooter	Cards, Panels	Displays a footer section.
hasActions	Cards, Dialogs	Displays an action area.
hasCloseButton	Dialogs, Toasts	Displays a close button.
hasBackButton	Navigation Bars	Displays a back button.
hasClearButton	Search Fields	Displays a clear action.
hasTooltip	Icons, Inputs	Displays a tooltip.
hasOverflowMenu	Cards, Lists	Displays a "More" menu.

Capability — can* (9)

Property	Applies to	Purpose
canDismiss	Alerts, Toasts	Allows the component to be dismissed.
canDrag	Cards, Lists	Allows drag-and-drop interactions.
canResize	Panels, Split Views	Allows resizing.
canSearch	Dropdowns, Tables	Enables search functionality.
canFilter	Tables, Lists	Enables filtering.
canSort	Tables	Enables sorting.
canClear	Search Fields	Allows clearing the current value.
canCopy	Code Blocks, Inputs	Allows copy actions.
canEdit	Tables, Forms	Allows editing.

Behavior — should* (8)

Property	Applies to	Purpose
shouldWrap	Typography, Chips	Wraps content onto multiple lines.
shouldTruncate	Typography, Tables	Truncates overflowing text.
shouldAnimate	Interactive Components	Enables animations.
shouldAutoFocus	Inputs, Dialogs	Automatically focuses on load.
shouldCloseOnSelect	Dropdowns, Menus	Closes after an item is selected.
shouldCloseOnOutsideClick	Popovers, Dialogs	Closes when clicking outside.
shouldLoop	Carousels	Loops through items continuously.
shouldStickToViewport	Tooltips, Popovers	Keeps the overlay within the viewport.

3 · Text Properties

Editable text or numeric content displayed within a component. Use PascalCase for all Text Property names. Grouped by content role.

Primary content

Property	Definition	Example
Preamble	Introductory text displayed before the primary heading to provide context or categorization.	NEW FEATURE
Title	The primary heading of a component, page, dialog, or section.	Manage Team Members
Subtitle	Secondary heading that supports or expands on the Title.	Invite and organize your workspace.
Blurb	A short summary or promotional paragraph that highlights the purpose or value of the content.	Collaborate seamlessly with your team in one secure workspace.
Description	Supporting body text that provides additional details or instructions.	Use your company email address.

Form content

Property	Definition	Example
Label	Identifies a field or input.	Email Address
Placeholder	Sample text shown inside an empty field.	Enter your email
Value	The current input value.	john@email.com
HelperText	Guidance shown alongside a field.	Must contain at least 8 characters.
Hint	Short instructional or contextual recommendation shown before interaction.	Use your company email address.
ErrorMessage	Validation feedback displayed when the user's input is invalid.	Email address is required.

Supporting content

Property	Definition	Example
SupportingText	Supplemental information that provides additional context or explanation.	Last updated 2 days ago.
Caption	Small descriptive text associated with another element, such as an image, chart, or table.	Figure 1. Monthly Sales Report

Metadata

Property	Definition	Example
BadgeCount	Numeric value displayed inside a badge or notification indicator.	99+
Price	Monetary value displayed by the component.	$249.99
Date	Calendar date.	July 16, 2026
Time	Time value.	10:30 AM
DateTime	Combined date and time.	July 16, 2026 · 10:30 AM
ReferenceNumber	Human-readable identifier used to reference a record or transaction.	REF-2026-001245
TransactionID	Unique identifier assigned to a transaction.	TXN-8A73D21F
OrderNumber	Identifier assigned to a customer order.	ORD-105248
InvoiceNumber	Identifier assigned to an invoice.	INV-2026-00482
TicketNumber	Identifier assigned to a support or service ticket.	TKT-009312

Definitions for the Form-content rows are normalized here for clarity; the canonical definitions live in the Notion Property Catalog.

4 · Node (Slot / Preset) Properties

Slots let components swap or embed subcomponents dynamically — custom content, badges, or nested elements.

Slot category	Naming pattern	Example	Applies to	Notes
Content slot	content · {object}-content	content · modal-content	Cards, Modals, Panels, List Items, Sections — any component where content is swapped	Entire content areas, allowing flexible replacements like custom sections, states, or placeholders.
Element slot	{element}	section-header · table-footer	Tabs, Menus, Breadcrumbs, Sidebars, Modals, Tables, Cards	Structural elements within components — headers, footers, navigation slots.
Asset slot	component-{asset type} (icon, background, video…)	modal-bg · status-icon	Cards, Banners, Media Components — any component with visual assets	Visual assets — seamless swapping of images, icons, and media elements.
Addon slot	addon · {object}-addon · addon-{position}	addon · avatarAddon · addon-left	Inputs, Text Areas — any component with additional elements	Add-on elements — prefix/suffix icons, decorative elements, etc.

5 · Property Values

Use Title Case for all variant values, drawn from the standard sets — so the same concept reads the same everywhere. Avoid lowercase, uppercase, or implementation-specific values.

Property	Standard values
Size	XS · SM · MD · LG · XL
Variant	Primary · Secondary · Ghost
State (interaction)	Default · Hover · Pressed · Focused · Disabled
Status (semantic)	Success · Warning · Error · Pending
Theme	Light · Dark
Orientation	Horizontal · Vertical

DO — semantic

Variant = Primary
Status = Success
Tone = Positive

DON'T — appearance

Variant = Blue
Status = Green
Booleans as Yes / No

6 · General Guidelines

The principles that catch the naming mistakes casing alone won't.

Use semantic names

Property names should communicate purpose, not appearance.

Recommended

Variant = Primary
Status = Success
Tone = Positive

Avoid

Variant = Blue
Status = Green

Keep property names generic

Names should describe reusable behaviors rather than component-specific implementations. The component itself already provides the context.

Recommended

Variant
Label
Description
ReferenceNumber

Avoid

ButtonVariant
PriceLabel
NavigationDescription

Separate structure from content

Structural elements are controlled with Boolean properties; displayed content uses Text Properties.

Structure — booleans

hasHeader
hasFooter
hasActions

Content — text

Title
Subtitle
Description

Separate State from Status

State represents interaction; Status represents semantic meaning. Never fold one into the other.

State — interaction

Default · Hover · Pressed · Focused · Disabled

Status — meaning

Success · Warning · Error · Pending

Recommended

State = Hover
Status = Success

Avoid

State = Success

Keep properties focused

Each property should represent a single responsibility — no catch-alls.

Good

Variant
State
Status

Avoid

Style
Configuration
Settings

Use positive boolean names

Booleans describe the desired state, not the absence of one.

Recommended

isDisabled
hasBadge
canDismiss
shouldWrap

Avoid

disable
hideBadge
notVisible

Maintain consistent terminology

Use the same property name for the same concept across the whole system — unless they genuinely represent different content roles.

Use

HelperText

Do not introduce

SupportText
AssistiveText
HintText

Align with engineering

Align design property names with engineering props. Exact parity isn't required, but terminology should stay conceptually aligned.

Design	Development
isDisabled	isDisabled
hasLeadingIcon	hasLeadingIcon
Variant	variant
Size	size

State vs Status — and the form-validation exception

State describes how the user is interacting with a component — Default, Pressed, Focused, Disabled. Status describes what the system is reporting about it — Success, Warning, Error, Info. Keeping them on separate axes means a component can be focused and in error at the same time, which a single merged axis cannot express.

Recommended

State = Default | Pressed | Disabled
Status = Success | Warning | Error

Avoid

State = Default | Pressed | Success | Error

The exception — form fields. Text-entry components may carry Error on the State axis rather than splitting into a second property. This is deliberate and system-wide, not a per-component oversight:

A form field in error is in a distinct interaction state, not merely reporting a status — it has failed validation and is asking for input again.
Splitting the axis multiplies the variant count for a combination that does not occur in practice: a field is not meaningfully focused and in error as two independent dimensions at design time, because focus is transient and error persists until the value changes.
Every major design system models field validation this way, so splitting it would make GCash fields harder to map to native components, not easier.

Components covered by the exception: Search Field, Amount Text Field, Text Area, and any future text-entry sibling. Everything else follows the two-axis rule above. Record the exception in the component description so a consumer can tell a deliberate choice from an omission.

Optimize for readability

Names should be concise and easy to scan in the Figma properties panel.

Good

Label
Description
BadgeCount
ReferenceNumber

Avoid

NavigationComponentLabel
ProductCardDescription
UserReferenceIdentifier

7 · Standardize Content Hierarchy

When a component has multiple text layers, name them from this ordered vocabulary — top to bottom, most prominent first. A standardized hierarchy improves consistency across the system.

Group	Order
Primary	Preamble · Title · Subtitle · Blurb · Description
Form	Label · Placeholder · Value · HelperText · Hint · ErrorMessage
Supporting	SupportingText · Caption
Metadata	BadgeCount · Price · Date · ReferenceNumber

8 · Maintain a Property Catalog

All approved properties are documented in the Property Catalog — the single source of truth for all component properties. Each entry includes:

Field	What it records
Property Name	The approved name (correct casing + prefix).
Property Type	Variant · Boolean · Text · Slot.
Definition	What the property means / controls.
Allowed Values	The standardized value set.
Applies To	Which components use it.
Usage Notes	Caveats, pairings to avoid, engineering alignment.
Example	A representative value.

Assessment tie-in. A component whose properties diverge from this catalog — spaced multi-word names, State=Success, component-specific text names, negative booleans, appearance-based values — is flagged under C2 · Variant & Property Naming. The recurring anti-pattern is a fleet of independent has* booleans; prefer collapsing to named slots plus a content enum (how Empty State went from 7 booleans to a clean 2×2).