Buoy

An island for your notifications, promises and background work.

Try it

buoy('Link copied', { icon: 'link' });

The island at the top of this page is the real component. Press a button and watch it change.

const timer = buoy.live({ label: 'Focus timer', expandable: true, render });
setInterval(() => timer.refresh(), 1000);

Things that keep going stay on the island until you stop them. While a timer, song, call or recording runs, tap the island to open its controls.

One prop changes the surface. Pick one to see it on the island.

<Buoy theme="ink" />

Render the island once. Call it from anywhere, even outside React.

import { Buoy, buoy } from 'buoy-ui';

export default function App() {
  return <Buoy />;
}

buoy('Link copied', { icon: 'link' });

Messages, promises, tasks and every option are covered in the README.

Nothing stacks and nothing jumps. The same element changes its size, icon and label.

Link copied

message

Saved to drafts

promise

3 uploads

task

Sent

two at once

One message at a time. A small badge counts what is waiting.

Uploads shrink into a bubble so new messages still get through.

Real buttons, a live region, and only fades when motion is reduced.