Capsule

A horizontal pill-shaped widget for self-contained interactive states: download / progress widgets, social activity highlights, system alerts, floating action panels, and media controls. Capsule is a compositional shell — it owns the pill frame (leading zone, freeform body, trailing zone, radius="full" Panel surface, optional interactive semantics) and lets you fill the body with Banner, Progress, custom rows, or anything else you need.

Use Capsule when a horizontal pill draws helpful attention to a discrete, self-contained widget. Do not use it as a generic replacement for table rows or in deep dense lists — rectangular containers scan better and save vertical space.

Default

PreviewCode

Ada Lovelace

Online · just now

---
// GENERATED from packages/demos/capsule/default.demo.tsx — edit the source, not this file.
import Capsule from "@pindoba/astro-capsule";
import Avatar from "@pindoba/astro-avatar";
import Banner from "@pindoba/astro-banner";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    bodyPanel={{ padding: "3xs" }}
    leadingPanel={{ padding: "xs" }}
    trailingPanel={{ padding: "sm" }}
  >
    <Avatar
      slot="leading"
      name="Ada Lovelace"
      src="https://i.pravatar.cc/96?u=ada"
      alt="Ada Lovelace"
      size="lg"
    />
    <Button slot="trailing" size="md" emphasis="primary" shape="pill">
      Message
    </Button>
    <Banner heading="Ada Lovelace" subheading="Online · just now" size="sm" />
  </Capsule>
</div>

Ada Lovelace

Online · just now

// GENERATED from packages/demos/capsule/default.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/react-capsule";
import { Avatar } from "@pindoba/react-avatar";
import { Banner } from "@pindoba/react-banner";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function DefaultDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        border="muted"
        bodyPanel={{ padding: "3xs" }}
        leadingPanel={{ padding: "xs" }}
        trailingPanel={{ padding: "sm" }}
        leading={
          <Avatar
            name="Ada Lovelace"
            src="https://i.pravatar.cc/96?u=ada"
            alt="Ada Lovelace"
            size="lg"
          />
        }
        trailing={
          <Button size="md" emphasis="primary" shape="pill">
            Message
          </Button>
        }
      >
        <Banner
          heading="Ada Lovelace"
          subheading="Online · just now"
          size="sm"
        />
      </Capsule>
    </div>
  );
}

Ada Lovelace

Online · just now

<script lang="ts">
  // GENERATED from packages/demos/capsule/default.demo.tsx — edit the source, not this file.
  import Capsule from "@pindoba/svelte-capsule";
  import Avatar from "@pindoba/svelte-avatar";
  import Banner from "@pindoba/svelte-banner";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    bodyPanel={{ padding: "3xs" }}
    leadingPanel={{ padding: "xs" }}
    trailingPanel={{ padding: "sm" }}
  >
    {#snippet leading()}
      <Avatar
        name="Ada Lovelace"
        src="https://i.pravatar.cc/96?u=ada"
        alt="Ada Lovelace"
        size="lg"
      ></Avatar>
    {/snippet}
    {#snippet trailing()}
      <Button size="md" emphasis="primary" shape="pill">Message</Button>
    {/snippet}
    <Banner heading="Ada Lovelace" subheading="Online · just now" size="sm"
    ></Banner>
  </Capsule>
</div>

Ada Lovelace

Online · just now

<script setup lang="ts">
// GENERATED from packages/demos/capsule/default.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/vue-capsule";
import { Avatar } from "@pindoba/vue-avatar";
import { Banner } from "@pindoba/vue-banner";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', width: '100%' })">
    <Capsule
      border="muted"
      :bodyPanel="{ padding: '3xs' }"
      :leadingPanel="{ padding: 'xs' }"
      :trailingPanel="{ padding: 'sm' }"
    >
      <template #leading>
        <Avatar
          name="Ada Lovelace"
          src="https://i.pravatar.cc/96?u=ada"
          alt="Ada Lovelace"
          size="lg"
        ></Avatar>
      </template>
      <template #trailing>
        <Button size="md" emphasis="primary" shape="pill">Message</Button>
      </template>
      <Banner
        heading="Ada Lovelace"
        subheading="Online · just now"
        size="sm"
      ></Banner>
    </Capsule>
  </div>
</template>

Ada Lovelace

Online · just now

// GENERATED from packages/demos/capsule/default.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/solid-capsule";
import { Avatar } from "@pindoba/solid-avatar";
import { Banner } from "@pindoba/solid-banner";
import { Button } from "@pindoba/solid-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function DefaultDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        border="muted"
        bodyPanel={{ padding: "3xs" }}
        leadingPanel={{ padding: "xs" }}
        trailingPanel={{ padding: "sm" }}
        leading={
          <Avatar
            name="Ada Lovelace"
            src="https://i.pravatar.cc/96?u=ada"
            alt="Ada Lovelace"
            size="lg"
          />
        }
        trailing={
          <Button size="md" emphasis="primary" shape="pill">
            Message
          </Button>
        }
      >
        <Banner
          heading="Ada Lovelace"
          subheading="Online · just now"
          size="sm"
        />
      </Capsule>
    </div>
  );
}

Use cases

The body is intentionally freeform. Each demo below composes Capsule with different pindoba primitives to express a use case from the spec.

Thumbnail leading, body composed of a Banner row (heading + subheading) plus a right-aligned metric column (“45%” / “12.5 GB / 85.0 GB”), full-width Progress underneath, paired icon buttons in trailing. trailingIsIconOnly tightens the right padding so the icon buttons nest cleanly into the curve.

PreviewCode

Cyberpunk 2077

45%

Calculating time remaining...

12.5 GB / 85 GB

---
// GENERATED from packages/demos/capsule/download-progress.demo.tsx — edit the source, not this file.
import Capsule from "@pindoba/astro-capsule";
import Avatar from "@pindoba/astro-avatar";
import Banner from "@pindoba/astro-banner";
import Button from "@pindoba/astro-button";
import Progress from "@pindoba/astro-progress";
import { Pause, X } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const downloaded = 12.5;
const total = 85.0;
const percent = 45;
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    size="lg"
    background="surface.ground"
    border="muted"
    leadingPanel={{ padding: "none" }}
    bodyPanel={{ padding: "sm" }}
    trailingPanel={{ padding: "sm" }}
  >
    <Avatar
      slot="leading"
      name="Cyberpunk 2077"
      src="https://picsum.photos/seed/cyberpunk/96/96"
      alt="Cyberpunk 2077"
      size="xl"
      shape="circle"
    />
    <Fragment slot="trailing">
      <Button
        size="xl"
        emphasis="secondary"
        shape="circle"
        aria-label="Pause download"
      >
        <Pause />
      </Button>
      <Button
        size="xl"
        emphasis="ghost"
        shape="circle"
        aria-label="Cancel download"
      >
        <X />
      </Button>
    </Fragment>
    <div class={stack({ gap: "xs", direction: "column", width: "100%" })}>
      <Banner
        heading={{ content: "Cyberpunk 2077", trailing: `${percent}%` }}
        subheading={{
          content: "Calculating time remaining...",
          trailing: `${downloaded} GB / ${total} GB`,
        }}
        passThrough={{
          headingTrailing: {
            style: css.raw({
              whiteSpace: "nowrap",
              fontVariantNumeric: "tabular-nums",
              fontSize: "sm",
              fontWeight: "semibold",
            }),
          },
          subheadingTrailing: {
            style: css.raw({
              whiteSpace: "nowrap",
              fontVariantNumeric: "tabular-nums",
              fontSize: "xs",
            }),
          },
        }}
      />
      <Progress value={percent} max={100} tone="primary" />
    </div>
  </Capsule>
</div>

Cyberpunk 2077

45%

Calculating time remaining...

12.5 GB / 85 GB

// GENERATED from packages/demos/capsule/download-progress.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/react-capsule";
import { Avatar } from "@pindoba/react-avatar";
import { Banner } from "@pindoba/react-banner";
import { Button } from "@pindoba/react-button";
import { Progress } from "@pindoba/react-progress";
import { Pause } from "lucide-react";
import { X } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const downloaded = 12.5;
const total = 85.0;
const percent = 45;
export default function DownloadProgressDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        size="lg"
        background="surface.ground"
        border="muted"
        leadingPanel={{ padding: "none" }}
        bodyPanel={{ padding: "sm" }}
        trailingPanel={{ padding: "sm" }}
        leading={
          <Avatar
            name="Cyberpunk 2077"
            src="https://picsum.photos/seed/cyberpunk/96/96"
            alt="Cyberpunk 2077"
            size="xl"
            shape="circle"
          />
        }
        trailing={
          <>
            <Button
              size="xl"
              emphasis="secondary"
              shape="circle"
              aria-label="Pause download"
            >
              <Pause />
            </Button>
            <Button
              size="xl"
              emphasis="ghost"
              shape="circle"
              aria-label="Cancel download"
            >
              <X />
            </Button>
          </>
        }
      >
        <div
          className={stack({ gap: "xs", direction: "column", width: "100%" })}
        >
          <Banner
            heading={{ content: "Cyberpunk 2077", trailing: `${percent}%` }}
            subheading={{
              content: "Calculating time remaining...",
              trailing: `${downloaded} GB / ${total} GB`,
            }}
            passThrough={{
              headingTrailing: {
                style: css.raw({
                  whiteSpace: "nowrap",
                  fontVariantNumeric: "tabular-nums",
                  fontSize: "sm",
                  fontWeight: "semibold",
                }),
              },
              subheadingTrailing: {
                style: css.raw({
                  whiteSpace: "nowrap",
                  fontVariantNumeric: "tabular-nums",
                  fontSize: "xs",
                }),
              },
            }}
          />
          <Progress value={percent} max={100} tone="primary" />
        </div>
      </Capsule>
    </div>
  );
}

Cyberpunk 2077

45%

Calculating time remaining...

12.5 GB / 85 GB

<script lang="ts">
  // GENERATED from packages/demos/capsule/download-progress.demo.tsx — edit the source, not this file.
  import Capsule from "@pindoba/svelte-capsule";
  import Avatar from "@pindoba/svelte-avatar";
  import Banner from "@pindoba/svelte-banner";
  import Button from "@pindoba/svelte-button";
  import Progress from "@pindoba/svelte-progress";
  import LucidePause from "@lucide/svelte/icons/pause";
  import LucideX from "@lucide/svelte/icons/x";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const downloaded = 12.5;
  const total = 85.0;
  const percent = 45;
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    size="lg"
    background="surface.ground"
    border="muted"
    leadingPanel={{ padding: "none" }}
    bodyPanel={{ padding: "sm" }}
    trailingPanel={{ padding: "sm" }}
  >
    {#snippet leading()}
      <Avatar
        name="Cyberpunk 2077"
        src="https://picsum.photos/seed/cyberpunk/96/96"
        alt="Cyberpunk 2077"
        size="xl"
        shape="circle"
      ></Avatar>
    {/snippet}
    {#snippet trailing()}
      <Button
        size="xl"
        emphasis="secondary"
        shape="circle"
        aria-label="Pause download"
      >
        <LucidePause />
      </Button>
      <Button
        size="xl"
        emphasis="ghost"
        shape="circle"
        aria-label="Cancel download"
      >
        <LucideX />
      </Button>
    {/snippet}
    <div class={stack({ gap: "xs", direction: "column", width: "100%" })}>
      <Banner
        heading={{ content: "Cyberpunk 2077", trailing: `${percent}%` }}
        subheading={{
          content: "Calculating time remaining...",
          trailing: `${downloaded} GB / ${total} GB`,
        }}
        passThrough={{
          headingTrailing: {
            style: css.raw({
              whiteSpace: "nowrap",
              fontVariantNumeric: "tabular-nums",
              fontSize: "sm",
              fontWeight: "semibold",
            }),
          },
          subheadingTrailing: {
            style: css.raw({
              whiteSpace: "nowrap",
              fontVariantNumeric: "tabular-nums",
              fontSize: "xs",
            }),
          },
        }}
      ></Banner>
      <Progress value={percent} max={100} tone="primary"></Progress>
    </div>
  </Capsule>
</div>

Cyberpunk 2077

45%

Calculating time remaining...

12.5 GB / 85 GB

<script setup lang="ts">
// GENERATED from packages/demos/capsule/download-progress.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/vue-capsule";
import { Avatar } from "@pindoba/vue-avatar";
import { Banner } from "@pindoba/vue-banner";
import { Button } from "@pindoba/vue-button";
import { Progress } from "@pindoba/vue-progress";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const downloaded = 12.5;
const total = 85.0;
const percent = 45;

const heading = { content: "Cyberpunk 2077", trailing: `${percent}%` };
const subheading = {
  content: "Calculating time remaining...",
  trailing: `${downloaded} GB / ${total} GB`,
};
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', width: '100%' })">
    <Capsule
      size="lg"
      background="surface.ground"
      border="muted"
      :leadingPanel="{ padding: 'none' }"
      :bodyPanel="{ padding: 'sm' }"
      :trailingPanel="{ padding: 'sm' }"
    >
      <template #leading>
        <Avatar
          name="Cyberpunk 2077"
          src="https://picsum.photos/seed/cyberpunk/96/96"
          alt="Cyberpunk 2077"
          size="xl"
          shape="circle"
        ></Avatar>
      </template>
      <template #trailing>
        <Button
          size="xl"
          emphasis="secondary"
          shape="circle"
          aria-label="Pause download"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-pause"
            aria-hidden="true"
          >
            <rect x="14" y="3" width="5" height="18" rx="1" />
            <rect x="5" y="3" width="5" height="18" rx="1" />
          </svg>
        </Button>
        <Button
          size="xl"
          emphasis="ghost"
          shape="circle"
          aria-label="Cancel download"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18" />
            <path d="m6 6 12 12" />
          </svg>
        </Button>
      </template>
      <div :class="stack({ gap: 'xs', direction: 'column', width: '100%' })">
        <Banner
          :heading="heading"
          :subheading="subheading"
          :passThrough="{
            headingTrailing: {
              style: css.raw({
                whiteSpace: 'nowrap',
                fontVariantNumeric: 'tabular-nums',
                fontSize: 'sm',
                fontWeight: 'semibold',
              }),
            },
            subheadingTrailing: {
              style: css.raw({
                whiteSpace: 'nowrap',
                fontVariantNumeric: 'tabular-nums',
                fontSize: 'xs',
              }),
            },
          }"
        ></Banner>
        <Progress :value="percent" :max="100" tone="primary"></Progress>
      </div>
    </Capsule>
  </div>
</template>

Cyberpunk 2077

45%

Calculating time remaining...

12.5 GB / 85 GB

// GENERATED from packages/demos/capsule/download-progress.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/solid-capsule";
import { Avatar } from "@pindoba/solid-avatar";
import { Banner } from "@pindoba/solid-banner";
import { Button } from "@pindoba/solid-button";
import { Progress } from "@pindoba/solid-progress";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const downloaded = 12.5;
const total = 85.0;
const percent = 45;
export default function DownloadProgressDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        size="lg"
        background="surface.ground"
        border="muted"
        leadingPanel={{ padding: "none" }}
        bodyPanel={{ padding: "sm" }}
        trailingPanel={{ padding: "sm" }}
        leading={
          <Avatar
            name="Cyberpunk 2077"
            src="https://picsum.photos/seed/cyberpunk/96/96"
            alt="Cyberpunk 2077"
            size="xl"
            shape="circle"
          />
        }
        trailing={
          <>
            <Button
              size="xl"
              emphasis="secondary"
              shape="circle"
              aria-label="Pause download"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-pause"
                aria-hidden="true"
              >
                <rect x="14" y="3" width="5" height="18" rx="1" />
                <rect x="5" y="3" width="5" height="18" rx="1" />
              </svg>
            </Button>
            <Button
              size="xl"
              emphasis="ghost"
              shape="circle"
              aria-label="Cancel download"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-x"
                aria-hidden="true"
              >
                <path d="M18 6 6 18" />
                <path d="m6 6 12 12" />
              </svg>
            </Button>
          </>
        }
      >
        <div class={stack({ gap: "xs", direction: "column", width: "100%" })}>
          <Banner
            heading={{ content: "Cyberpunk 2077", trailing: `${percent}%` }}
            subheading={{
              content: "Calculating time remaining...",
              trailing: `${downloaded} GB / ${total} GB`,
            }}
            passThrough={{
              headingTrailing: {
                style: css.raw({
                  whiteSpace: "nowrap",
                  fontVariantNumeric: "tabular-nums",
                  fontSize: "sm",
                  fontWeight: "semibold",
                }),
              },
              subheadingTrailing: {
                style: css.raw({
                  whiteSpace: "nowrap",
                  fontVariantNumeric: "tabular-nums",
                  fontSize: "xs",
                }),
              },
            }}
          />
          <Progress value={percent} max={100} tone="primary" />
        </div>
      </Capsule>
    </div>
  );
}

Avatar leading, single-line Banner body, primary action in trailing. The simplest case the spec covers.

PreviewCode

Elena Rostova

Currently playing Elden Ring

---
// GENERATED from packages/demos/capsule/social-activity.demo.tsx — edit the source, not this file.
import Capsule from "@pindoba/astro-capsule";
import Avatar from "@pindoba/astro-avatar";
import Banner from "@pindoba/astro-banner";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    bodyPanel={{ padding: "4xs" }}
    leadingPanel={{ padding: "xs" }}
    trailingPanel={{ padding: "sm" }}
  >
    <Avatar
      slot="leading"
      name="Elena Rostova"
      src="https://i.pravatar.cc/96?u=elena"
      alt="Elena Rostova"
      size="lg"
    />
    <Button
      slot="trailing"
      size="md"
      emphasis="primary"
      tone="primary"
      shape="pill"
    >
      Join Session
    </Button>
    <Banner
      size="sm"
      heading="Elena Rostova"
      subheading="Currently playing Elden Ring"
    />
  </Capsule>
</div>

Elena Rostova

Currently playing Elden Ring

// GENERATED from packages/demos/capsule/social-activity.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/react-capsule";
import { Avatar } from "@pindoba/react-avatar";
import { Banner } from "@pindoba/react-banner";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function SocialActivityDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        border="muted"
        bodyPanel={{ padding: "4xs" }}
        leadingPanel={{ padding: "xs" }}
        trailingPanel={{ padding: "sm" }}
        leading={
          <Avatar
            name="Elena Rostova"
            src="https://i.pravatar.cc/96?u=elena"
            alt="Elena Rostova"
            size="lg"
          />
        }
        trailing={
          <Button size="md" emphasis="primary" tone="primary" shape="pill">
            Join Session
          </Button>
        }
      >
        <Banner
          size="sm"
          heading="Elena Rostova"
          subheading="Currently playing Elden Ring"
        />
      </Capsule>
    </div>
  );
}

Elena Rostova

Currently playing Elden Ring

<script lang="ts">
  // GENERATED from packages/demos/capsule/social-activity.demo.tsx — edit the source, not this file.
  import Capsule from "@pindoba/svelte-capsule";
  import Avatar from "@pindoba/svelte-avatar";
  import Banner from "@pindoba/svelte-banner";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    bodyPanel={{ padding: "4xs" }}
    leadingPanel={{ padding: "xs" }}
    trailingPanel={{ padding: "sm" }}
  >
    {#snippet leading()}
      <Avatar
        name="Elena Rostova"
        src="https://i.pravatar.cc/96?u=elena"
        alt="Elena Rostova"
        size="lg"
      ></Avatar>
    {/snippet}
    {#snippet trailing()}
      <Button size="md" emphasis="primary" tone="primary" shape="pill">
        Join Session
      </Button>
    {/snippet}
    <Banner
      size="sm"
      heading="Elena Rostova"
      subheading="Currently playing Elden Ring"
    ></Banner>
  </Capsule>
</div>

Elena Rostova

Currently playing Elden Ring

<script setup lang="ts">
// GENERATED from packages/demos/capsule/social-activity.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/vue-capsule";
import { Avatar } from "@pindoba/vue-avatar";
import { Banner } from "@pindoba/vue-banner";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', width: '100%' })">
    <Capsule
      border="muted"
      :bodyPanel="{ padding: '4xs' }"
      :leadingPanel="{ padding: 'xs' }"
      :trailingPanel="{ padding: 'sm' }"
    >
      <template #leading>
        <Avatar
          name="Elena Rostova"
          src="https://i.pravatar.cc/96?u=elena"
          alt="Elena Rostova"
          size="lg"
        ></Avatar>
      </template>
      <template #trailing>
        <Button size="md" emphasis="primary" tone="primary" shape="pill"
          >Join Session</Button
        >
      </template>
      <Banner
        size="sm"
        heading="Elena Rostova"
        subheading="Currently playing Elden Ring"
      ></Banner>
    </Capsule>
  </div>
</template>

Elena Rostova

Currently playing Elden Ring

// GENERATED from packages/demos/capsule/social-activity.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/solid-capsule";
import { Avatar } from "@pindoba/solid-avatar";
import { Banner } from "@pindoba/solid-banner";
import { Button } from "@pindoba/solid-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function SocialActivityDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        border="muted"
        bodyPanel={{ padding: "4xs" }}
        leadingPanel={{ padding: "xs" }}
        trailingPanel={{ padding: "sm" }}
        leading={
          <Avatar
            name="Elena Rostova"
            src="https://i.pravatar.cc/96?u=elena"
            alt="Elena Rostova"
            size="lg"
          />
        }
        trailing={
          <Button size="md" emphasis="primary" tone="primary" shape="pill">
            Join Session
          </Button>
        }
      >
        <Banner
          size="sm"
          heading="Elena Rostova"
          subheading="Currently playing Elden Ring"
        />
      </Capsule>
    </div>
  );
}

System alert

Stamp leading, tone="warning" flowing to surface and text, ghost trailing action.

PreviewCode

Build failed

main · 12 min ago

---
// GENERATED from packages/demos/capsule/system-alert.demo.tsx — edit the source, not this file.
import Capsule from "@pindoba/astro-capsule";
import Stamp from "@pindoba/astro-stamp";
import Banner from "@pindoba/astro-banner";
import Button from "@pindoba/astro-button";
import { TriangleAlert } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    bodyPanel={{ padding: "4xs" }}
    trailingPanel={{ padding: "sm" }}
    leadingPanel={{ padding: "xs" }}
  >
    <Stamp
      slot="leading"
      tone="warning"
      emphasis="primary"
      shape="circle"
      size="lg"
      border="none"
    >
      <TriangleAlert />
    </Stamp>
    <Button
      slot="trailing"
      size="md"
      emphasis="secondary"
      tone="warning"
      shape="pill"
    >
      View logs
    </Button>
    <Banner size="sm" heading="Build failed" subheading="main · 12 min ago" />
  </Capsule>
</div>

Build failed

main · 12 min ago

// GENERATED from packages/demos/capsule/system-alert.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/react-capsule";
import { Stamp } from "@pindoba/react-stamp";
import { Banner } from "@pindoba/react-banner";
import { Button } from "@pindoba/react-button";
import { TriangleAlert } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

export default function SystemAlertDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        border="muted"
        bodyPanel={{ padding: "4xs" }}
        trailingPanel={{ padding: "sm" }}
        leadingPanel={{ padding: "xs" }}
        leading={
          <Stamp
            tone="warning"
            emphasis="primary"
            shape="circle"
            size="lg"
            border="none"
          >
            <TriangleAlert />
          </Stamp>
        }
        trailing={
          <Button size="md" emphasis="secondary" tone="warning" shape="pill">
            View logs
          </Button>
        }
      >
        <Banner
          size="sm"
          heading="Build failed"
          subheading="main · 12 min ago"
        />
      </Capsule>
    </div>
  );
}

Build failed

main · 12 min ago

<script lang="ts">
  // GENERATED from packages/demos/capsule/system-alert.demo.tsx — edit the source, not this file.
  import Capsule from "@pindoba/svelte-capsule";
  import Stamp from "@pindoba/svelte-stamp";
  import Banner from "@pindoba/svelte-banner";
  import Button from "@pindoba/svelte-button";
  import LucideTriangleAlert from "@lucide/svelte/icons/triangle-alert";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    bodyPanel={{ padding: "4xs" }}
    trailingPanel={{ padding: "sm" }}
    leadingPanel={{ padding: "xs" }}
  >
    {#snippet leading()}
      <Stamp
        tone="warning"
        emphasis="primary"
        shape="circle"
        size="lg"
        border="none"
      >
        <LucideTriangleAlert />
      </Stamp>
    {/snippet}
    {#snippet trailing()}
      <Button size="md" emphasis="secondary" tone="warning" shape="pill">
        View logs
      </Button>
    {/snippet}
    <Banner size="sm" heading="Build failed" subheading="main · 12 min ago"
    ></Banner>
  </Capsule>
</div>

Build failed

main · 12 min ago

<script setup lang="ts">
// GENERATED from packages/demos/capsule/system-alert.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/vue-capsule";
import { Stamp } from "@pindoba/vue-stamp";
import { Banner } from "@pindoba/vue-banner";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', width: '100%' })">
    <Capsule
      border="muted"
      :bodyPanel="{ padding: '4xs' }"
      :trailingPanel="{ padding: 'sm' }"
      :leadingPanel="{ padding: 'xs' }"
    >
      <template #leading>
        <Stamp
          tone="warning"
          emphasis="primary"
          shape="circle"
          size="lg"
          border="none"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-triangle-alert"
            aria-hidden="true"
          >
            <path
              d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
            />
            <path d="M12 9v4" />
            <path d="M12 17h.01" />
          </svg>
        </Stamp>
      </template>
      <template #trailing>
        <Button size="md" emphasis="secondary" tone="warning" shape="pill"
          >View logs</Button
        >
      </template>
      <Banner
        size="sm"
        heading="Build failed"
        subheading="main · 12 min ago"
      ></Banner>
    </Capsule>
  </div>
</template>

Build failed

main · 12 min ago

// GENERATED from packages/demos/capsule/system-alert.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/solid-capsule";
import { Stamp } from "@pindoba/solid-stamp";
import { Banner } from "@pindoba/solid-banner";
import { Button } from "@pindoba/solid-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function SystemAlertDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        border="muted"
        bodyPanel={{ padding: "4xs" }}
        trailingPanel={{ padding: "sm" }}
        leadingPanel={{ padding: "xs" }}
        leading={
          <Stamp
            tone="warning"
            emphasis="primary"
            shape="circle"
            size="lg"
            border="none"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-triangle-alert"
              aria-hidden="true"
            >
              <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
              <path d="M12 9v4" />
              <path d="M12 17h.01" />
            </svg>
          </Stamp>
        }
        trailing={
          <Button size="md" emphasis="secondary" tone="warning" shape="pill">
            View logs
          </Button>
        }
      >
        <Banner
          size="sm"
          heading="Build failed"
          subheading="main · 12 min ago"
        />
      </Capsule>
    </div>
  );
}

Floating action

as="button" + interactive turns the whole pill into a focusable trigger. The focus ring traces the full capsule shape. No trailing zone → padding is symmetric.

PreviewCode

3 items selected

Bulk actions

---
// GENERATED from packages/demos/capsule/floating-action.demo.tsx — edit the source, not this file.
import Capsule from "@pindoba/astro-capsule";
import Stamp from "@pindoba/astro-stamp";
import Banner from "@pindoba/astro-banner";
import Button from "@pindoba/astro-button";
import { Archive, FolderInput, Trash } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    shadow="lg"
    bodyPanel={{ padding: "4xs" }}
    leadingPanel={{ padding: "xs" }}
    trailingPanel={{ padding: "xs" }}
  >
    <Stamp
      slot="leading"
      tone="primary"
      emphasis="primary"
      shape="circle"
      size="lg"
      border="none"
    >
      3
    </Stamp>
    <Fragment slot="trailing">
      <Button
        size="md"
        emphasis="ghost"
        shape="circle"
        aria-label="Archive selection"
      >
        <Archive />
      </Button>
      <Button
        size="md"
        emphasis="ghost"
        shape="circle"
        aria-label="Move selection"
      >
        <FolderInput />
      </Button>
      <Button
        size="md"
        emphasis="ghost"
        tone="danger"
        shape="circle"
        aria-label="Delete selection"
      >
        <Trash />
      </Button>
    </Fragment>
    <Banner size="sm" heading="3 items selected" subheading="Bulk actions" />
  </Capsule>
</div>

3 items selected

Bulk actions

// GENERATED from packages/demos/capsule/floating-action.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/react-capsule";
import { Stamp } from "@pindoba/react-stamp";
import { Banner } from "@pindoba/react-banner";
import { Button } from "@pindoba/react-button";
import { Archive } from "lucide-react";
import { FolderInput } from "lucide-react";
import { Trash } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

export default function FloatingActionDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        border="muted"
        shadow="lg"
        bodyPanel={{ padding: "4xs" }}
        leadingPanel={{ padding: "xs" }}
        trailingPanel={{ padding: "xs" }}
        leading={
          <Stamp
            tone="primary"
            emphasis="primary"
            shape="circle"
            size="lg"
            border="none"
          >
            3
          </Stamp>
        }
        trailing={
          <>
            <Button
              size="md"
              emphasis="ghost"
              shape="circle"
              aria-label="Archive selection"
            >
              <Archive />
            </Button>
            <Button
              size="md"
              emphasis="ghost"
              shape="circle"
              aria-label="Move selection"
            >
              <FolderInput />
            </Button>
            <Button
              size="md"
              emphasis="ghost"
              tone="danger"
              shape="circle"
              aria-label="Delete selection"
            >
              <Trash />
            </Button>
          </>
        }
      >
        <Banner
          size="sm"
          heading="3 items selected"
          subheading="Bulk actions"
        />
      </Capsule>
    </div>
  );
}

3 items selected

Bulk actions

<script lang="ts">
  // GENERATED from packages/demos/capsule/floating-action.demo.tsx — edit the source, not this file.
  import Capsule from "@pindoba/svelte-capsule";
  import Stamp from "@pindoba/svelte-stamp";
  import Banner from "@pindoba/svelte-banner";
  import Button from "@pindoba/svelte-button";
  import LucideArchive from "@lucide/svelte/icons/archive";
  import LucideFolderInput from "@lucide/svelte/icons/folder-input";
  import LucideTrash from "@lucide/svelte/icons/trash";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    shadow="lg"
    bodyPanel={{ padding: "4xs" }}
    leadingPanel={{ padding: "xs" }}
    trailingPanel={{ padding: "xs" }}
  >
    {#snippet leading()}
      <Stamp
        tone="primary"
        emphasis="primary"
        shape="circle"
        size="lg"
        border="none"
      >
        3
      </Stamp>
    {/snippet}
    {#snippet trailing()}
      <Button
        size="md"
        emphasis="ghost"
        shape="circle"
        aria-label="Archive selection"
      >
        <LucideArchive />
      </Button>
      <Button
        size="md"
        emphasis="ghost"
        shape="circle"
        aria-label="Move selection"
      >
        <LucideFolderInput />
      </Button>
      <Button
        size="md"
        emphasis="ghost"
        tone="danger"
        shape="circle"
        aria-label="Delete selection"
      >
        <LucideTrash />
      </Button>
    {/snippet}
    <Banner size="sm" heading="3 items selected" subheading="Bulk actions"
    ></Banner>
  </Capsule>
</div>

3 items selected

Bulk actions

<script setup lang="ts">
// GENERATED from packages/demos/capsule/floating-action.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/vue-capsule";
import { Stamp } from "@pindoba/vue-stamp";
import { Banner } from "@pindoba/vue-banner";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', width: '100%' })">
    <Capsule
      border="muted"
      shadow="lg"
      :bodyPanel="{ padding: '4xs' }"
      :leadingPanel="{ padding: 'xs' }"
      :trailingPanel="{ padding: 'xs' }"
    >
      <template #leading>
        <Stamp
          tone="primary"
          emphasis="primary"
          shape="circle"
          size="lg"
          border="none"
        >
          3
        </Stamp>
      </template>
      <template #trailing>
        <Button
          size="md"
          emphasis="ghost"
          shape="circle"
          aria-label="Archive selection"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-archive"
            aria-hidden="true"
          >
            <rect width="20" height="5" x="2" y="3" rx="1" />
            <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
            <path d="M10 12h4" />
          </svg>
        </Button>
        <Button
          size="md"
          emphasis="ghost"
          shape="circle"
          aria-label="Move selection"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-folder-input"
            aria-hidden="true"
          >
            <path
              d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"
            />
            <path d="M2 13h10" />
            <path d="m9 16 3-3-3-3" />
          </svg>
        </Button>
        <Button
          size="md"
          emphasis="ghost"
          tone="danger"
          shape="circle"
          aria-label="Delete selection"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-trash"
            aria-hidden="true"
          >
            <path d="M10 11v6" />
            <path d="M14 11v6" />
            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
            <path d="M3 6h18" />
            <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
          </svg>
        </Button>
      </template>
      <Banner
        size="sm"
        heading="3 items selected"
        subheading="Bulk actions"
      ></Banner>
    </Capsule>
  </div>
</template>

3 items selected

Bulk actions

// GENERATED from packages/demos/capsule/floating-action.demo.tsx — edit the source, not this file.
import { Capsule } from "@pindoba/solid-capsule";
import { Stamp } from "@pindoba/solid-stamp";
import { Banner } from "@pindoba/solid-banner";
import { Button } from "@pindoba/solid-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function FloatingActionDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        border="muted"
        shadow="lg"
        bodyPanel={{ padding: "4xs" }}
        leadingPanel={{ padding: "xs" }}
        trailingPanel={{ padding: "xs" }}
        leading={
          <Stamp
            tone="primary"
            emphasis="primary"
            shape="circle"
            size="lg"
            border="none"
          >
            3
          </Stamp>
        }
        trailing={
          <>
            <Button
              size="md"
              emphasis="ghost"
              shape="circle"
              aria-label="Archive selection"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-archive"
                aria-hidden="true"
              >
                <rect width="20" height="5" x="2" y="3" rx="1" />
                <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
                <path d="M10 12h4" />
              </svg>
            </Button>
            <Button
              size="md"
              emphasis="ghost"
              shape="circle"
              aria-label="Move selection"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-folder-input"
                aria-hidden="true"
              >
                <path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1" />
                <path d="M2 13h10" />
                <path d="m9 16 3-3-3-3" />
              </svg>
            </Button>
            <Button
              size="md"
              emphasis="ghost"
              tone="danger"
              shape="circle"
              aria-label="Delete selection"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-trash"
                aria-hidden="true"
              >
                <path d="M10 11v6" />
                <path d="M14 11v6" />
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                <path d="M3 6h18" />
                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
              </svg>
            </Button>
          </>
        }
      >
        <Banner
          size="sm"
          heading="3 items selected"
          subheading="Bulk actions"
        />
      </Capsule>
    </div>
  );
}

Asymmetric padding

Capsule auto-tightens the side under a leading asset (so it nests into the outer curve) and under an icon-only trailing button (same reason). When neither zone is present, padding stays symmetric.

Leading	Trailing	Left padding	Right padding
–	–	loose	loose
✓	–	tight	loose
–	text button	loose	loose
–	icon button (`trailingIsIconOnly`)	loose	tight
✓	text button	tight	loose
✓	icon button (`trailingIsIconOnly`)	tight	tight

Override with paddingLeading / paddingTrailing if you need to force a specific value.

Slot padding defaults

You don’t need to pass leadingPanel / trailingPanel just to get sensible inner padding around the slot wrapper — Capsule bakes per-size defaults into both:

Capsule size	Leading inner padding	Trailing inner padding	Body vertical padding
`sm`	`2xs`	`xs`	`3xs`
`md`	`2xs`	`xs`	`4xs`
`lg`	`xs`	`xs`	`3xs`

Only pass leadingPanel / trailingPanel when you want a distinct slot surface (tinted background, tone color, border, shadow) or want to override the default inner padding — Panel then owns the slot’s padding entirely.

Anchor capsules (as="a" or href present) drop the default text-underline so the inner Avatar/Banner composition reads as a clickable surface. Pass passThrough.root.style.textDecoration to bring an underline back.

Sizes

The size prop locks the leading and trailing zone heights so the pill stays the same height regardless of what you put in them. Pair nested children (Avatar, Stamp, Button) with the matching size for optical alignment — CAPSULE_SIZE_PAIRINGS exports the recommended mapping.

Capsule size	Avatar / Stamp	Button	Badge
`sm`	`sm`	`sm`	`sm`
`md`	`md`	`md`	`md`
`lg`	`lg`	`lg`	`md`

PreviewCode