Components

Blocks

  1. Stamp
    1. Size
    2. Shape
    3. Emphasis
    4. Feedback Colors
    5. Background
    6. Icon Fill
    7. Alignment with Button
    8. Props
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

Four size variants are available, matching Button exactly. Place a Stamp next to a Button with the same size and shape="square" for aligned icon cells.

 
---
import Stamp from "../Stamp.astro";
import { Icon } from "astro-icon/components";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Stamp size="2xs"><Icon name="lucide:star" /></Stamp>
  <Stamp size="xs"><Icon name="lucide:star" /></Stamp>
  <Stamp size="sm"><Icon name="lucide:star" /></Stamp>
  <Stamp size="md"><Icon name="lucide:star" /></Stamp>
  <Stamp size="lg"><Icon name="lucide: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 { Icon } from "astro-icon/components";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Stamp shape="square"><Icon name="lucide:star" /></Stamp>
  <Stamp shape="circle"><Icon name="lucide: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 
---
import Stamp from "../Stamp.astro";
import { Icon } from "astro-icon/components";
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"><Icon name="lucide:star" /></Stamp>
    <Stamp emphasis="secondary"><Icon name="lucide:star" /></Stamp>
    <Stamp emphasis="tertiary"><Icon name="lucide:star" /></Stamp>
    <Stamp emphasis="muted"><Icon name="lucide:star" /></Stamp>
    <Stamp emphasis="ghost"><Icon name="lucide:star" /></Stamp>
    <Stamp emphasis="adaptive"><Icon name="lucide: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"><Icon name="lucide:star" /></Stamp>
      Inherits primary text color
    </span>
    <span
      class={css({
        display: "inline-flex",
        alignItems: "center",
        gap: "xs",
        color: "danger.text.accent",
      })}
    >
      <Stamp emphasis="adaptive"><Icon name="lucide:star" /></Stamp>
      Inherits danger text color
    </span>
    <span
      class={css({
        display: "inline-flex",
        alignItems: "center",
        gap: "xs",
        color: "success.text.accent",
      })}
    >
      <Stamp emphasis="adaptive"><Icon name="lucide: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 { Icon } from "astro-icon/components";
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"
      ><Icon name="lucide:star" /></Stamp
    >
    <Stamp feedback="success" emphasis="primary"
      ><Icon name="lucide:star" /></Stamp
    >
    <Stamp feedback="warning" emphasis="primary"
      ><Icon name="lucide:star" /></Stamp
    >
    <Stamp feedback="danger" emphasis="primary"
      ><Icon name="lucide:star" /></Stamp
    >
    <Stamp feedback="neutral" emphasis="primary"
      ><Icon name="lucide:star" /></Stamp
    >
  </div>

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

  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Stamp feedback="primary" emphasis="tertiary"
      ><Icon name="lucide:star" /></Stamp
    >
    <Stamp feedback="success" emphasis="tertiary"
      ><Icon name="lucide:star" /></Stamp
    >
    <Stamp feedback="warning" emphasis="tertiary"
      ><Icon name="lucide:star" /></Stamp
    >
    <Stamp feedback="danger" emphasis="tertiary"
      ><Icon name="lucide:star" /></Stamp
    >
    <Stamp feedback="neutral" emphasis="tertiary"
      ><Icon name="lucide: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 { Icon } from "astro-icon/components";
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.soft">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="primary" background="surface.step.1">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="primary" background="surface.step.2">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="primary" background="surface.step.3">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="primary" background="surface.deep">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="primary" background="transparent">
      <Icon name="lucide:star" />
    </Stamp>
  </div>

  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Stamp feedback="primary" emphasis="secondary" background="surface.soft">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="secondary" background="surface.step.1">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="secondary" background="surface.step.2">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="secondary" background="surface.step.3">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="secondary" background="surface.deep">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="secondary" background="transparent">
      <Icon name="lucide:star" />
    </Stamp>
  </div>

  <div
    class={stack({
      gap: "md",
      direction: "row",
      align: "center",
      flexWrap: "wrap",
    })}
  >
    <Stamp feedback="primary" emphasis="tertiary" background="surface.soft">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="tertiary" background="surface.step.1">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="tertiary" background="surface.step.2">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="tertiary" background="surface.step.3">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="tertiary" background="surface.deep">
      <Icon name="lucide:star" />
    </Stamp>
    <Stamp feedback="primary" emphasis="tertiary" background="transparent">
      <Icon name="lucide: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 { Icon } from "astro-icon/components";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Stamp size="2xs" iconFill><Icon name="lucide:star" /></Stamp>
  <Stamp size="xs" iconFill><Icon name="lucide:star" /></Stamp>
  <Stamp size="sm" iconFill><Icon name="lucide:star" /></Stamp>
  <Stamp size="md" iconFill><Icon name="lucide:star" /></Stamp>
  <Stamp size="lg" iconFill><Icon name="lucide:star" /></Stamp>
  <Stamp size="lg" shape="circle" iconFill><Icon name="lucide: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 { Icon } from "astro-icon/components";
import { stack } from "@pindoba/styled-system/patterns";
---

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

  <Button size="sm" shape="square"><Icon name="lucide:star" /></Button>
  <Stamp size="sm"><Icon name="lucide:star" /></Stamp>
  <Button size="sm" shape="circle"><Icon name="lucide:star" /></Button>
  <Stamp size="sm" shape="circle"><Icon name="lucide:star" /></Stamp>

  <Button size="md" shape="square"><Icon name="lucide:star" /></Button>
  <Stamp size="md"><Icon name="lucide:star" /></Stamp>
  <Button size="md" shape="circle"><Icon name="lucide:star" /></Button>
  <Stamp size="md" shape="circle"><Icon name="lucide:star" /></Stamp>

  <Button size="lg" shape="square"><Icon name="lucide:star" /></Button>
  <Stamp size="lg"><Icon name="lucide:star" /></Stamp>
  <Button size="lg" shape="circle"><Icon name="lucide:star" /></Button>
  <Stamp size="lg" shape="circle"><Icon name="lucide:star" /></Stamp>
</div>

Props

props · 11 total
prop type default req description
feedback "primary""success""warning""danger""neutral" "primary" Semantic feedback color scheme. primary: primary color palette. success: green. warning: orange. danger: red. neutral: gray.
emphasis "primary""secondary""tertiary""muted""ghost""adaptive" "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…

emphasis

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.

Type "primary" | "secondary" | "tertiary" | "muted" | "ghost" | "adaptive"
Default "secondary"
Required No
size "xs""sm""md""lg" "md" Size variant, matching Button. xs: extra small. sm: small. md: default. lg: large.
shape "square""circle" "square" Shape of the stamp. square uses the size's border radius; circle rounds to a full circle.
background "surface.soft""surface.step.1""surface.step.2""surface.step.3""surface.deep""transparent" "surface.soft" (or "transparent" when emphasis="ghost"/"adaptive") Surface fill (inherited from panel). Remapped per emphasis: accent ramp under primary, palette-tinted under secondary, neutral under tertiary.
border "none""default""bold""muted""accent" "default" | "accent" | "muted" | "none" Border ring strength (inherited from panel). Defaults per emphasis: accent for primary, muted for muted, none for ghost/adaptive, default otherwise.
iconFill boolean false When true, a child SVG icon stretches to fill the entire stamp container instead of sizing to the stamp's font size.
translucent boolean false Applies a frosted-glass backdrop blur to the surface.
passThrough { root?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLSpanElement> } } undefined Custom styling and props for the root slot. Accepts style (SystemStyleObject) and props (HTML attributes).
children Snippetslot undefined Content rendered inside the stamp (typically an icon).
...rest HTMLAttributes<HTMLSpanElement> - Standard HTML span attributes.