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.

---
import Stamp from "../Stamp.astro";
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.

---
import Stamp from "../Stamp.astro";
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 colorInherits danger text colorInherits success text color
---
import Stamp from "../Stamp.astro";
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.

---
import Stamp from "../Stamp.astro";
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).

---
import Stamp from "../Stamp.astro";
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.

---
import Stamp from "../Stamp.astro";
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.

---
import Stamp from "../Stamp.astro";
import Button from "@pindoba/astro-button";
import { Star } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

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

  <Button size="sm" shape="square"><Star /></Button>
  <Stamp size="sm"><Star /></Stamp>
  <Button size="sm" shape="circle"><Star /></Button>
  <Stamp size="sm" shape="circle"><Star /></Stamp>

  <Button size="md" shape="square"><Star /></Button>
  <Stamp size="md"><Star /></Stamp>
  <Button size="md" shape="circle"><Star /></Button>
  <Stamp size="md" shape="circle"><Star /></Stamp>

  <Button size="lg" shape="square"><Star /></Button>
  <Stamp size="lg"><Star /></Stamp>
  <Button size="lg" shape="circle"><Star /></Button>
  <Stamp size="lg" shape="circle"><Star /></Stamp>
</div>
props · 24 shown · 24 total
active
boolean"current""checked""current-within"
default false

Mark this as the chosen one in a set (a current nav item, a checked option, a selected card). Where `interactive` says it *can* be clicked, `active` says it *is* the current choice. Use `activeEmphasis` to control how loud the state is. Combined with `interactive`, hover and press restart their stepping from the active baseline rather than falling back to the unchosen ramp. The three values differ only in what drives the state: `true` by the prop (via `data-panel-active`), `"checked"` by a wrapped native input (`:has(input:checked)` — zero JS, nothing to re-render), and `"current"` by an existing `aria-current`.

activeEmphasis
"primary""secondary""tertiary"
default the panel's `emphasis`

How loud the `active` state is. Defaults to the panel's own `emphasis`, so the chosen state lands on the same ramp as the resting look — this prop is the override for when the active item should be louder (or quieter) than the panel itself. `"primary"` fills with the feedback accent ramp and flips text to the contrast scale (~150 RGB units of separation — the option that reads at a glance in a dense list). `"secondary"` tints the feedback surface ramp and `"tertiary"` the neutral ramp; both promote text to `bold` and lift the border to the default line, but move the surface only ~7–18 units.

background
"surface.peak""surface.hill""surface.base""surface.valley""surface.ground""transparent"

Surface background from the Panel scale (`surface.peak` → `surface.ground`, or `transparent`).

border
"none""bold""default""muted""accent"

Border style: `none`, `default`, `bold`, or `muted`.

borderActive
"none""bold""inherit""default""muted""accent"

No description yet.

borderInteract
"none""bold""default""muted""accent"

Border style applied on hover / focus interaction.

children slot svelte
Snippet

No description yet.

element binding svelte
HTMLSpanElementnull

No description yet.

emphasis
"primary""muted""secondary""tertiary""ghost""adaptive"
default "secondary"

Visual emphasis. primary: solid accent surface with high-contrast text. secondary: feedback-tinted soft surface with accent text. tertiary: neutral surface with bold feedback text. muted: soft surface with muted border and dimmed text. ghost: transparent. adaptive: inherit ambient text color.

feedback
"primary""neutral""success""warning""danger""inherit"

Semantic color tone: `neutral`, `primary`, `success`, `warning`, `danger`, or `inherit`.

iconFill
boolean
default false

When true, a child SVG icon stretches to fill the entire stamp container instead of sizing to the stamp's font size.

interactive
boolean

Enable interactive (hover / focus / press) affordances and states.

padding
"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""7xl""8xl""4xs""3xs""2xs""9xl""10xl""11xl"

Inner padding from the spacing scale.

passThrough
StampPassThrough<RootElementAttributes>

Per-slot style and attribute override bag. Each slot accepts a `style` (SystemStyleObject) merged into the slot's class and a `props` object spread onto the element.

radius
"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""full""2xs""inner""inherit"

Corner radius override from the spacing scale (or `full` for fully rounded).

radiusBottom
"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""full""2xs""inner""inherit"

Corner radius for the bottom-left and bottom-right corners.

radiusLeft
"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""full""2xs""inner""inherit"

Corner radius for the top-left and bottom-left corners.

radiusRight
"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""full""2xs""inner""inherit"

Corner radius for the top-right and bottom-right corners.

radiusTop
"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""full""2xs""inner""inherit"

Corner radius for the top-left and top-right corners.

reserveBorderSpace
boolean

Keep (or drop) the always-1px transparent border the panel reserves so a border appearing or changing never shifts layout. Computed automatically — it's reserved when a resting `border` is visible, or when `interactive` / `borderInteract` / `active` can change the border at runtime. Set `false` only on a panel that must not occupy that 1px (e.g. a borderless housing frame that would otherwise add 2px around a set).

shadow
"sm""md""lg""xl""none""xs"

Elevation shadow applied to the surface.

shape
"square""circle"
default "square"

Shape of the stamp. square uses the size's border radius; circle rounds to a full circle.

size
"sm""md""lg""xl""xs""2xs"
default "md"

Size variant, matching Button. xs: extra small. sm: small. md: default. lg: large. xl: extra large.

translucent
boolean

Apply a frosted-glass effect with backdrop blur over a surface background.

Plus all standard <span> HTML attributes.

Type

  • Components
  • Blocks