DynamicIsland

Render a pill-shaped container that animates its size and content when the view changes.

DynamicIsland is a client component that renders a centred, translucent dark pill using a motion layout animation. Use it for compact status messages that change over time. When view changes, the inner content remounts with a scale, opacity, and blur entrance, and the pill animates to its new size.

Ready

Start sync

Import#

typescript

import { DynamicIsland } from "@reactberry/system/blocks";
import type { DynamicIslandProps, DynamicIslandView } from "@reactberry/system/blocks";

Usage#

typescript

import { useState } from "react";
import { DynamicIsland } from "@reactberry/system/blocks";
import type { DynamicIslandView } from "@reactberry/system/blocks";
import { Box, Button, Text } from "@reactberry/system/elements";

export default function StatusIsland() {
  const [view, setView] = useState<DynamicIslandView>("idle");

  const content =
    view === "idle" ? (
      <Text px="m" py="xs" color="white">Ready</Text>
    ) : (
      <Box px="l" py="s" display="flex" gap="s" alignItems="center">
        <Text color="white">Uploading 3 files</Text>
      </Box>
    );

  return (
    <Box display="flex" flexDirection="column" gap="m">
      <DynamicIsland view={view} content={content} />
      <Button onClick={() => setView(view === "idle" ? "uploading" : "idle")}>Toggle</Button>
    </Box>
  );
}

Examples#

Announced status steps#

Step through several views. containerProps adds role="status" and aria-live="polite" so screen readers announce each change.

Recording · 00:42

Next step

API#

DynamicIsland#

Prop	Type	Default	Description
`view`	`string`	—	Identifies the current content. Used as the React key of the inner content, so a new value replays the entrance animation. Falls back to `"default"`.
`onViewChange`	`((view: string) => void)`	—	Declared but not used.
`content`	`ReactNode`	—	Content rendered inside the pill.
`controlIcons`	`Record<string, ReactNode>`	—	Declared but not used.
`containerProps`	`any`	—	Spread onto the outer `motion` `Box`, after the default layout props and before `transition`.

No other props are accepted. DynamicIslandProps is the props interface, and DynamicIslandView is an alias for string.

Accessibility#

No ARIA role or live region is applied. Add one through containerProps (for example role="status") when changes should be announced.

Notes#

The component is controlled only through view. It has no internal way to change view, and onViewChange is never called.
controlIcons is accepted by the type but ignored; no controls are rendered.
Default container styling: skin="translucent.dark", shape="pill", minWidth="6rem", m="0 auto", width and height fit-content, flex centring, and hidden overflow. Any of these can be overridden through containerProps.
transition is set after containerProps is spread, so a transition passed in containerProps is overridden. Both the container and the content use a spring with bounce: 0.5.
No reduced-motion check is performed.