Banner

Like ActionMenu, each part is a default export from its own entry point, with its props type exported from the same module. Compose the message row inside Content and place Actions below it.

import BannerRoot from "swshd/Banner/Root";
import BannerContent from "swshd/Banner/Content";
import BannerAvatar from "swshd/Banner/Avatar";
import BannerMessage from "swshd/Banner/Message";
import BannerTitle from "swshd/Banner/Title";
import BannerDismiss from "swshd/Banner/Dismiss";
import BannerActions from "swshd/Banner/Actions";
import BannerAction from "swshd/Banner/Action";

<BannerRoot onDismiss={removeInvitation}>
  <BannerContent>
    <BannerAvatar name="Aidan Swan" />
    <BannerMessage>
      <BannerTitle>Aidan Swan</BannerTitle> invited you to join the tour album.
    </BannerMessage>
    <BannerDismiss accessibilityLabel={t("Dismiss invitation")} />
  </BannerContent>
  <BannerActions>
    <BannerAction label={t("Preview")} variant="secondary" onPress={previewAlbum} />
    <BannerAction label={t("Accept invite")} onPress={acceptInvite} />
  </BannerActions>
</BannerRoot>

Swipe horizontally in either direction, use the close button, or press Escape while a control is focused. Preview leaves the message in place; Accept invite removes it in this example. Reset the stack to try again.

import BannerStack from "swshd/Banner/Stack";

const remove = (id: string) =>
  setItems((current) => current.filter((item) => item.id !== id));

<BannerStack>
  {items.map((item) => (
    <BannerRoot key={item.id} onDismiss={() => remove(item.id)}>
      {/* Compose this item's Banner parts. */}
    </BannerRoot>
  ))}
</BannerStack>

The first child is active. Give every root a stable key and remove the dismissed item from your state. The next card stays mounted for promotion, while a backplate represents deeper items. Incomplete and canceled swipes return to rest, and vertical scrolling remains available.

Dismiss centers beside a single-line message and aligns to the top when the message wraps. Use Avatar for a person, Icon for a status, or omit the visual. Actions are optional and wrap when the parent is narrow.

import BannerIcon from "swshd/Banner/Icon";
import IconCheck from "swshd/icons/IconCheck";

<BannerContent>
  <BannerIcon Icon={IconCheck} />
  <BannerMessage>Album ready.</BannerMessage>
  <BannerDismiss accessibilityLabel={t("Dismiss upload notification")} />
</BannerContent>

Swap the loaded content for Skeleton to reserve the circle, message lines, and action pills. Skeleton and loading actions register with Root automatically and block every action and dismissal until loading ends. Root's loading prop also blocks interaction when the caller is loading other content.

import BannerSkeleton from "swshd/Banner/Skeleton";

<BannerRoot loading={loading} onDismiss={removeInvitation}>
  {loading ? (
    <BannerSkeleton accessibilityLabel={t("Loading invitation")} />
  ) : (
    <>{/* Compose the loaded content and actions. */}</>
  )}
</BannerRoot>

BannerRoot

BannerAction

Content parts

Import each part from swshd/Banner/ followed by its name below. Render these parts inside Root. Title belongs inside Message.

BannerStack

BannerSkeleton