component

Stamp

A versatile, foundational 1:1 container with baked-in sizing and radii for displaying a foreground element — most commonly an icon — in a tile shape. Stamp is built on top of Panel (surfaces, borders, translucency) and matches the Button component’s sizing so icon tiles and icon buttons align pixel-for-pixel in toolbars and forms.

Size

Five size variants are available, matching Button plus an xl for emphatic icon tiles. Place a Stamp next to a Button with the same size and shape="square" for aligned icon cells.

---
// GENERATED from packages/demos/stamp/size.demo.tsx — edit the source, not this file.
import Stamp from "@pindoba/astro-stamp";
import { Star } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Stamp size="2xs">
    <Star />
  </Stamp>
  <Stamp size="xs">
    <Star />
  </Stamp>
  <Stamp size="sm">
    <Star />
  </Stamp>
  <Stamp size="md">
    <Star />
  </Stamp>
  <Stamp size="lg">
    <Star />
  </Stamp>
  <Stamp size="xl">
    <Star />
  </Stamp>
</div>

Shape

Stamps are always 1:1. square uses the size’s border radius; circle rounds to a full circle.

---
// GENERATED from packages/demos/stamp/shape.demo.tsx — edit the source, not this file.
import Stamp from "@pindoba/astro-stamp";
import { Star } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Stamp shape="square">
    <Star />
  </Stamp>
  <Stamp shape="circle">
    <Star />
  </Stamp>
</div>

Emphasis

The emphasis prop controls visual weight. primary uses a solid accent surface with contrast text; secondary (default) uses a feedback-tinted soft surface with accent text; tertiary uses a neutral surface with bold feedback-colored text; muted uses a softer surface with a muted border and dimmed text; ghost is transparent — ideal when the stamp sits on an already-colored panel; adaptive inherits ambient text color.

Inherits primary text color Inherits danger text color Inherits success text color
---
// GENERATED from packages/demos/stamp/emphasis.demo.tsx — edit the source, not this file.
import Stamp from "@pindoba/astro-stamp";
import { Star } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Stamp emphasis="primary">
      <Star />
    </Stamp>
    <Stamp emphasis="secondary">
      <Star />
    </Stamp>
    <Stamp emphasis="tertiary">
      <Star />
    </Stamp>
    <Stamp emphasis="muted">
      <Star />
    </Stamp>
    <Stamp emphasis="ghost">
      <Star />
    </Stamp>
    <Stamp emphasis="adaptive">
      <Star />
    </Stamp>
  </div>

  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <span
      class={css({
        display: "inline-flex",
        alignItems: "center",
        gap: "xs",
        color: "primary.text.accent",
      })}
    >
      <Stamp emphasis="adaptive">
        <Star />
      </Stamp>{" "}
      Inherits primary text color
    </span>
    <span
      class={css({
        display: "inline-flex",
        alignItems: "center",
        gap: "xs",
        color: "danger.text.accent",
      })}
    >
      <Stamp emphasis="adaptive">
        <Star />
      </Stamp>{" "}
      Inherits danger text color
    </span>
    <span
      class={css({
        display: "inline-flex",
        alignItems: "center",
        gap: "xs",
        color: "success.text.accent",
      })}
    >
      <Stamp emphasis="adaptive">
        <Star />
      </Stamp>{" "}
      Inherits success text color
    </span>
  </div>
</div>

Feedback Colors

Stamps support semantic feedback colors for communicating status at a glance.

---
// GENERATED from packages/demos/stamp/feedback.demo.tsx — edit the source, not this file.
import Stamp from "@pindoba/astro-stamp";
import { Star } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Stamp feedback="primary" emphasis="primary">
      <Star />
    </Stamp>
    <Stamp feedback="success" emphasis="primary">
      <Star />
    </Stamp>
    <Stamp feedback="warning" emphasis="primary">
      <Star />
    </Stamp>
    <Stamp feedback="danger" emphasis="primary">
      <Star />
    </Stamp>
    <Stamp feedback="neutral" emphasis="primary">
      <Star />
    </Stamp>
  </div>

  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Stamp feedback="primary">
      <Star />
    </Stamp>
    <Stamp feedback="success">
      <Star />
    </Stamp>
    <Stamp feedback="warning">
      <Star />
    </Stamp>
    <Stamp feedback="danger">
      <Star />
    </Stamp>
    <Stamp feedback="neutral">
      <Star />
    </Stamp>
  </div>

  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Stamp feedback="primary" emphasis="tertiary">
      <Star />
    </Stamp>
    <Stamp feedback="success" emphasis="tertiary">
      <Star />
    </Stamp>
    <Stamp feedback="warning" emphasis="tertiary">
      <Star />
    </Stamp>
    <Stamp feedback="danger" emphasis="tertiary">
      <Star />
    </Stamp>
    <Stamp feedback="neutral" emphasis="tertiary">
      <Star />
    </Stamp>
  </div>
</div>

Background

Stamp inherits panel’s full surface model. background, border, and translucent work across every emphasis × feedback combination — panel’s compound variants remap each surface.* value to the correct ramp (accent under primary, palette-tinted under secondary, neutral under tertiary).

---
// GENERATED from packages/demos/stamp/background.demo.tsx — edit the source, not this file.
import Stamp from "@pindoba/astro-stamp";
import { Star } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Stamp feedback="primary" emphasis="primary" background="surface.peak">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="primary" background="surface.hill">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="primary" background="surface.base">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="primary" background="surface.valley">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="primary" background="surface.ground">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="primary" background="transparent">
      <Star />
    </Stamp>
  </div>

  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Stamp feedback="primary" emphasis="secondary" background="surface.peak">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="secondary" background="surface.hill">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="secondary" background="surface.base">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="secondary" background="surface.valley">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="secondary" background="surface.ground">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="secondary" background="transparent">
      <Star />
    </Stamp>
  </div>

  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Stamp feedback="primary" emphasis="tertiary" background="surface.peak">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="tertiary" background="surface.hill">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="tertiary" background="surface.base">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="tertiary" background="surface.valley">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="tertiary" background="surface.ground">
      <Star />
    </Stamp>
    <Stamp feedback="primary" emphasis="tertiary" background="transparent">
      <Star />
    </Stamp>
  </div>
</div>

Icon Fill

Set iconFill to make a child SVG icon stretch to fill the entire stamp container instead of sizing to the stamp’s font size.

---
// GENERATED from packages/demos/stamp/icon-fill.demo.tsx — edit the source, not this file.
import Stamp from "@pindoba/astro-stamp";
import { Star } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Stamp size="2xs" iconFill>
    <Star />
  </Stamp>
  <Stamp size="xs" iconFill>
    <Star />
  </Stamp>
  <Stamp size="sm" iconFill>
    <Star />
  </Stamp>
  <Stamp size="md" iconFill>
    <Star />
  </Stamp>
  <Stamp size="lg" iconFill>
    <Star />
  </Stamp>
  <Stamp size="lg" shape="circle" iconFill>
    <Star />
  </Stamp>
</div>

Alignment with Button

A Stamp with a given size renders at the same bounding box as a square Button with the same size — useful when mixing decorative icon tiles and interactive icon buttons in a row.

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

<div
  class={stack({
    gap: "md",
    direction: "column",
  })}
>
  <div class={stack({ gap: "md", direction: "row", align: "center" })}>
    <Button aria-label="Favorite" size="xs" shape="square">
      <Star />
    </Button>
    <Stamp size="xs">
      <Star />
    </Stamp>
    <Button aria-label="Favorite" size="xs" shape="circle">
      <Star />
    </Button>
    <Stamp size="xs" shape="circle">
      <Star />
    </Stamp>

    <Button aria-label="Favorite" size="sm" shape="square">
      <Star />
    </Button>
    <Stamp size="sm">
      <Star />
    </Stamp>
    <Button aria-label="Favorite" size="sm" shape="circle">
      <Star />
    </Button>
    <Stamp size="sm" shape="circle">
      <Star />
    </Stamp>

    <Button aria-label="Favorite" size="md" shape="square">
      <Star />
    </Button>
    <Stamp size="md">
      <Star />
    </Stamp>
    <Button aria-label="Favorite" size="md" shape="circle">
      <Star />
    </Button>
    <Stamp size="md" shape="circle">
      <Star />
    </Stamp>

    <Button aria-label="Favorite" size="lg" shape="square">
      <Star />
    </Button>
    <Stamp size="lg">
      <Star />
    </Stamp>
    <Button aria-label="Favorite" size="lg" shape="circle">
      <Star />
    </Button>
    <Stamp size="lg" shape="circle">
      <Star />
    </Stamp>
  </div>
</div>
  • Components
  • Blocks