MorphButtonNew

A pressable surface that morphs between auto-measured collapsed and expanded content, growing toward one of eight logical directions.

Import

import { MorphButton } from 'heroui-native-pro';

Anatomy

<MorphButton>
  <MorphButton.CollapsedContent>...</MorphButton.CollapsedContent>
  <MorphButton.ExpandedContent>...</MorphButton.ExpandedContent>
</MorphButton>

• MorphButton: Root container managing the open state. Its layout footprint always equals the collapsed content, so the expanding surface overflows without shifting surrounding layout. Tapping toggles the open state. Supports controlled and uncontrolled open state.
• MorphButton.CollapsedContent: In-flow content shown while collapsed. Its natural size defines the root footprint and the collapsed morph target. Fades and scales out while open.
• MorphButton.ExpandedContent: Panel content shown while expanded. Always mounted and measured at its natural size while hidden, so the morph target is known before the first open and the content never reflows mid-morph. Fades and scales in while open.

Usage

Basic usage

Both content parts are measured automatically; the surface springs between their sizes when tapped.

<MorphButton>
  <MorphButton.CollapsedContent>...</MorphButton.CollapsedContent>
  <MorphButton.ExpandedContent className="w-72">
    ...
  </MorphButton.ExpandedContent>
</MorphButton>

Variants

Apply a surface color scheme with the variant prop. primary is a high-contrast inverted surface for floating buttons over app content; secondary reads clearly when the button sits on a surface card.

<MorphButton variant="primary">...</MorphButton>

<MorphButton variant="secondary">...</MorphButton>

Directions

Choose which way the surface grows with the direction prop. The opposite corner/edge stays pinned to the collapsed button. start and end are logical, so all eight directions mirror in RTL.

<MorphButton direction="top">...</MorphButton>

<MorphButton direction="bottom-end">...</MorphButton>

<MorphButton direction="start">...</MorphButton>

Positioning

The root's footprint stays at the collapsed size, so position it like any static element. Give the expanding side enough room; the panel overflows the root without shifting siblings.

<View className="absolute bottom-6 inset-x-0 items-center">
  <MorphButton direction="top">...</MorphButton>
</View>

Panel width

The expanded size is measured from the content. For panel layouts, set an explicit width on ExpandedContent; height flows from the content and re-measures when it changes.

<MorphButton>
  <MorphButton.CollapsedContent>...</MorphButton.CollapsedContent>
  <MorphButton.ExpandedContent className="w-80">
    ...
  </MorphButton.ExpandedContent>
</MorphButton>

Controlled

Control the open state externally with isOpen and onOpenChange. Taps on the surface still request a toggle through onOpenChange.

const [isOpen, setIsOpen] = useState(false);

<MorphButton isOpen={isOpen} onOpenChange={setIsOpen}>
  ...
</MorphButton>;

Disabled

Disable the toggle interaction with isDisabled.

<MorphButton isDisabled>...</MorphButton>

Custom morph spring

Customize the width/height spring through the animation prop, or pass "disable-all" to snap every transition.

<MorphButton animation={{ morphSpringConfig: { damping: 30, stiffness: 400 } }}>
  ...
</MorphButton>

<MorphButton animation="disable-all">...</MorphButton>

Example

import { Button, Separator } from 'heroui-native';
import { MorphButton } from 'heroui-native-pro';
import { useState } from 'react';
import { Text, View } from 'react-native';

export default function CartMorphButton() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <View className="absolute bottom-6 inset-x-0 items-center">
      <MorphButton direction="top" isOpen={isOpen} onOpenChange={setIsOpen}>
        <MorphButton.CollapsedContent>
          <Text className="text-sm font-medium text-background">
            2 products in bag
          </Text>
          <View className="rounded-2xl bg-accent-soft px-2 py-0.5">
            <Text className="text-xs font-medium text-accent-soft-foreground">
              View
            </Text>
          </View>
        </MorphButton.CollapsedContent>
        <MorphButton.ExpandedContent className="w-80">
          <Text className="text-base font-semibold text-background">
            Order summary
          </Text>
          <View className="flex-row items-center justify-between">
            <Text className="text-sm text-background/70">
              2 × Gazelle Indoor
            </Text>
            <Text className="text-sm font-medium text-background">$208</Text>
          </View>
          <Separator className="bg-background/15" />
          <View className="flex-row items-center justify-between">
            <Text className="text-sm font-medium text-background">
              Subtotal
            </Text>
            <Text className="text-base font-semibold text-background">
              $208
            </Text>
          </View>
          <View className="flex-row items-center gap-2">
            <Button
              size="sm"
              variant="tertiary"
              className="flex-1 bg-background/10"
              onPress={() => setIsOpen(false)}
            >
              <Button.Label className="text-background">
                Keep shopping
              </Button.Label>
            </Button>
            <Button
              size="sm"
              variant="tertiary"
              className="flex-1 bg-background"
            >
              <Button.Label className="text-foreground">Buy now</Button.Label>
            </Button>
          </View>
        </MorphButton.ExpandedContent>
      </MorphButton>
    </View>
  );
}

API Reference

MorphButton

ElementSlots<MorphButtonRootSlots>

styles

MorphButtonRootAnimation

Animation configuration for the root component. Can be:

• false or "disabled": Disable only root animations
• "disable-all": Disable all animations including children
• true or undefined: Use default animations
• object: Custom animation configuration

MorphButton.CollapsedContent

In-flow content shown while collapsed. Its natural size defines the root footprint and the collapsed morph target.

MorphButton.ExpandedContent

Always-mounted panel content measured at its natural size while hidden, so the expanded morph target is known before the first open. Set an explicit width via className (e.g. w-72) for panel layouts.

MorphButtonContentAnimation

Animation configuration for the content parts. Value tuples read [closed, open]. Can be:

• false or "disabled": Disable the part's animations
• true or undefined: Use default animations
• object: Custom animation configuration

Hooks

useMorphButton

Hook to access the morph button context. Must be used within a MorphButton component.

import { useMorphButton } from 'heroui-native-pro';

const {
  isOpen,
  isOpenValue,
  direction,
  variant,
  isDisabled,
  collapsedWidth,
  collapsedHeight,
  expandedWidth,
  expandedHeight,
  surfaceWidth,
  surfaceHeight,
  open,
  close,
  toggle,
} = useMorphButton();

Returns