Overview

This guide focuses on breaking prop changes to be aware of when migrating from Abyss V1 to V2. These include:

• Props that have been removed
• Props whose behavior or typings have been updated
• Props whose names have been changed but whose functionality remains the same.

This guide does not cover:

• New props added in V2
• Class changes
• Token changes
• Additional features and enhancements

For complete documentation of all available props, including new features added, refer to each component's dedicated documentation page.

AI-Powered Component Migration

Need help with component migration? Use our AI-powered migration tool to help convert V1 components to their V2 equivalents with proper prop mapping.

Badge

import { Badge } from '@uhg-abyss/mobile/ui/Badge';

Same in V1 and V2

Badge changes

V1 Prop	Status	Migration Details
rounded	Removed	The rounded prop has been removed. All badges now have a standard rounded appearance.

Banner

import { Banner } from '@uhg-abyss/mobile/ui/Banner';

Same in V1 and V2

Banner changes

V1 Prop	Status	Migration Details
title	Renamed	The title prop has been renamed to heading.
description	Renamed	The description prop has been renamed to paragraph.
color	Renamed	The color prop has been renamed to background and values have changed.
footer	Removed	The footer prop has been removed.
content	Removed	The content prop has been removed.
eyebrow	Removed	The eyebrow prop has been removed.
linkText	Removed	The linkText and href props have been removed. Use the new cta prop to provide a link or button.
href	Removed	The href and linkText props have been removed. Use the new cta prop to provide a link or button.
linkIcon	Removed	The linkIcon prop has been removed. Add icons directly to the cta element if needed.
showExternalIcon	Removed	The showExternalIcon prop has been removed. Add icons directly to the cta element if needed.
centerText	Removed	The centerText prop has been removed. Use custom layout or styles if center alignment is needed.
textSize	Removed	The textSize prop has been removed. Text size is now determined by the variant and design tokens.
grow	Removed	The grow prop has been removed. Banner sizing is now determined by the variant.
fixed	Removed	The fixed prop has been removed. Banner sizing is now determined by the variant.
isCloseable	Removed	The isCloseable prop has been removed.
onClose	Removed	The onClose prop has been removed.
variant	Modified	The variant prop values have changed. Use the new values to match the desired layout.
ctaType	Removed	The ctaType prop has been removed. Use the new cta prop to provide a link or button.

Button

import { Button } from '@uhg-abyss/mobile/ui/Button';

Same in V1 and V2

Button changes

V1 Prop	Status	Migration Details
variant	Modified	The variant prop has new accepted values and works together with the new prop type to manage the appearance of the Button.
before	Removed	Use the icon and iconPosition props instead.
after	Removed	Use the icon and iconPosition props instead.
rounded	Removed	Use the iconPosition prop with value iconOnly for icon-only buttons.
type	Modified	The type prop has new accepted values and works together with the variant prop to manage the appearance of the Button. If you used type="submit" in v1 to submit a form, use the new boolean prop submit in v2.

Carousel

import { Carousel } from '@uhg-abyss/mobile/ui/Carousel';

Same in V1 and V2

Carousel changes

V1 Prop	Status	Migration Details
title	Renamed	The title prop has been renamed to heading.
slides	Renamed	The slides prop has been renamed to data and now expects an array of data objects instead of React nodes. Use the renderSlide prop to render each slide.

CellGroup

import { CellGroup } from '@uhg-abyss/mobile/ui/CellGroup';

Same in V1 and V2

CellGroup changes

V1 Prop	Status	Migration Details
fullBorder	Removed	The fullBorder prop has been removed. Borders are now handled by design tokens and cannot be toggled via props.
hideBorderTop	Removed	The hideBorderTop prop has been removed. Borders are now handled by design tokens and cannot be toggled via props.
hideBorderBottom	Removed	The hideBorderBottom prop has been removed. Borders are now handled by design tokens and cannot be toggled via props.
hideBorderAll	Removed	The hideBorderAll prop has been removed. Borders are now handled by design tokens and cannot be toggled via props.
data	Removed	The data prop for drag-and-drop cell creation is removed. Use static children instead.
setData	Removed	The setData prop for drag-and-drop cell creation is removed. Use static children instead.
onAddCell	Removed	The onAddCell prop for drag-and-drop cell creation is removed. Use static children instead.
onRemoveCell	Removed	The onRemoveCell prop for drag-and-drop cell creation is removed. Use static children instead.
title	Removed	The title prop for drag-and-drop cell creation is removed.
type	Modified	The type prop value dragAndDrop has been removed. Only default, radio, toggle, and checkbox are supported.
value	Modified	The value prop type is now only string | string[]. Passing other types is no longer supported.

Cell

V1

import { CellGroup } from '@uhg-abyss/mobile/ui/CellGroup';

V2

import { Cell } from '@uhg-abyss/mobile/ui/Cell';

Changed from V1

Cell changes

V1 Prop	Status	Migration Details
children	Removed	The children prop is no longer supported. Use the new structured content props such as heading, subheading, paragraph, and eyebrow.
title	Renamed	The title prop has been renamed to heading.
subtitle	Renamed	The subtitle prop has been renamed to subheading.
description	Renamed	The description prop has been renamed to paragraph.
footer	Removed	The footer prop has been removed. Use paragraph or custom trailing content as needed.
highlight	Removed	The highlight prop has been removed. Highlighting is now handled by design tokens.
icon	Removed	The icon and iconBackgroundColor props have been replaced by leadingContent.
pressIcon	Removed	The pressIcon prop has been replaced by navIcon.
fullBorder	Removed	The fullBorder prop has been removed. Borders are now handled by design tokens.
hideBorderTop	Removed	The hideBorderTop prop has been removed. Borders are now handled by design tokens.
hideBorderBottom	Removed	The hideBorderBottom prop has been removed. Borders are now handled by design tokens.
onInfoButtonPress	Removed	The onInfoButtonPress prop has been removed. Use a custom trailing icon and handle its press event as needed.
titleColor	Removed	The titleColor prop has been removed. Use design tokens for color.
titleWeight	Removed	The titleWeight prop has been removed. Use design tokens for font weight.

Chip

import { Chip } from '@uhg-abyss/mobile/ui/Chip';

Same in V1 and V2

Chip.Group changes

V1 Prop	Status	Migration Details
title	Renamed	The title prop has been renamed to heading.

Coachmark

import { Coachmark } from '@uhg-abyss/mobile/ui/Coachmark';

Same in V1 and V2

Coachmark changes

V1 Prop	Status	Migration Details
children	Renamed	The children prop has been renamed to heading.
orientation	Renamed	The orientation prop has been renamed to position.
colorScheme	Renamed	The colorScheme prop has been renamed to type.
description	Renamed	The description prop has been renamed to children.
showBorder	Removed	The showBorder prop has been removed. Use the type prop and set it to "light-border" to achieve similar styling.

DonutChart

import { DonutChart } from '@uhg-abyss/mobile/ui/DonutChart';

Same in V1 and V2

DonutChart changes

V1 Prop	Status	Migration Details
size	Modified	The default value for size has changed from 50 to 40. Update your usage if you rely on the default.
animationDuration	Modified	The default value for animationDuration has changed from 1000 to 500. Update your usage if you rely on the default.

IconBrand

import { IconBrand } from '@uhg-abyss/web/ui/IconBrand';

Same in V1 and V2

IconBrand changes

V1 Prop	Status	Migration Details
useDeprecated	Removed	The useDeprecated prop has been removed. The old Optum icons are no longer available.

LoadingSpinner

import { LoadingSpinner } from '@uhg-abyss/mobile/ui/LoadingSpinner';

Same in V1 and V2

LoadingSpinner changes

V1 Prop	Status	Migration Details
children	Removed	The children prop has been removed.
label	Renamed	The label prop has been renamed to heading.
size	Modified	The size prop values have changed. Use "xs" or "sm" in v2. The default is now "sm".

NeedHelp

import { NeedHelp } from '@uhg-abyss/mobile/ui/NeedHelp';

Same in V1 and V2

NeedHelp changes

V1 Prop	Status	Migration Details
heading	Renamed	The prop formerly named title in v1 is now heading in v2.
paragraph	Renamed	The prop formerly named description in v1 is now paragraph in v2. It accepts React nodes for rich content.

Popover

import { Popover } from '@uhg-abyss/mobile/ui/Popover';

Same in V1 and V2

Popover changes

V1 Prop	Status	Migration Details
title	Renamed	The title prop has been renamed to heading and must be a string.
children	Renamed	The children prop has been renamed to content.
footer	Modified	The footer prop is now required in v2.
variant	Removed	The variant prop has been removed. Styling is now handled by design tokens.

Rating

import { Rating } from '@uhg-abyss/mobile/ui/Rating';

Same in V1 and V2

Rating changes

V1 Prop	Status	Migration Details
variant	Modified	The default value for variant has changed from "large" to "small". Update your usage if you rely on the default.
showRating	Removed	The showRating prop has been removed. Use hideRating instead to control the display of the rating number.
children	Removed	The children prop is no longer supported. Use the provided props (rating, reviews, etc.) to control content.

SelectInput

import { SelectInput } from '@uhg-abyss/mobile/ui/SelectInput';

Same in V1 and V2

SelectInput changes

V1 Prop	Status	Migration Details
modalTitle	Renamed	The modalTitle prop has been renamed to modalHeading.

SelectInputMulti

import { SelectInputMulti } from '@uhg-abyss/mobile/ui/SelectInputMulti';

Same in V1 and V2

SelectInputMulti changes

V1 Prop	Status	Migration Details
modalTitle	Renamed	The modalTitle prop has been renamed to modalHeading.
onSubmit	Removed	The onSubmit prop is no longer supported. Use the native TextInput onSubmitEditing prop instead.

Skeleton

import { Skeleton } from '@uhg-abyss/mobile/ui/Skeleton';

Same in V1 and V2

Skeleton changes

V1 Prop	Status	Migration Details
variant	Modified	The variant prop values have changed. Use "text", "square", or "round" in v2. The default is now "text".
stale	Removed	The stale prop has been removed.

Tabs

import { Tabs } from '@uhg-abyss/mobile/ui/Tabs';

Same in V1 and V2

Tabs changes

V1 Prop	Status	Migration Details
activeTab	Removed	The activeTab prop has been removed. Use the TabsRef methods (goToTab, goToNextTab, goToPrevTab) to control tab navigation imperatively, or read the current active tab from ref.current.activeTab.
onChange	Removed	The onChange prop has been removed. Use the TabsRef methods to control tab navigation imperatively. If you need to track tab changes, you can use useEffect with the ref to monitor tab changes.
title	Renamed	The title prop has been renamed to heading.
colorScheme	Renamed	The colorScheme prop has been renamed to alt.

TextArea

V1

import { TextField } from '@uhg-abyss/mobile/ui/TextField';

V2

import { TextArea } from '@uhg-abyss/mobile/ui/TextArea';

Changed from V1

Quick Overview

The TextField component has been renamed to TextArea to better reflect its purpose as a multi-line text input. All associated props, classes, and translation keys have been updated accordingly.

TextInput

V1

import { TextInput } from '@uhg-abyss/mobile/ui/TextInput';

V2

import { InputField } from '@uhg-abyss/mobile/ui/InputField';

Changed from V1

Quick Overview

The TextInput component was renamed to InputField in v2. There are no prop or behavior changes — only the component name and import path were updated.

TextInput / InputField changes

V1 Prop	Status	Migration Details
component	Renamed	The component was renamed from TextInput to InputField. Update both the import path and the component name.

Timeline

import { Timeline } from '@uhg-abyss/mobile/ui/Timeline';

Same in V1 and V2

Timeline changes

V1 Prop	Status	Migration Details
description	Renamed	The description prop has been renamed to paragraph in v2. Use paragraph to provide custom description text for the active step card.
titleWeight	Renamed	The titleWeight prop has been renamed to headingWeight in v2. Use headingWeight to control the font weight of inactive step headings. The default is now $normal.
TimelineStep.title	Renamed	The title prop on Timeline.Step has been renamed to heading in v2. Use heading for the step heading.
TimelineStep.description	Renamed	The description prop on Timeline.Step has been renamed to paragraph in v2. Use paragraph for the step description.
TimelineStep.isDisabled	Removed	The isDisabled prop on Timeline.Step has been removed. All steps are now enabled by default.

Toast

import { Toast } from '@uhg-abyss/mobile/ui/Toast';

Same in V1 and V2

Toast changes

V1 Prop	Status	Migration Details
children	Renamed	The children prop has been renamed to paragraph.