Seal

Live preview

Loading example…

An official-looking stamp: a heavy tone-colored frame with a title and the lines that vouch for a document (issuer, code, date). Children are the lines, usually <p>. Purely typographic, so it prints and scales with the text.

Import

import { Seal } from "@jcsoftdev/ui/atoms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/seal.

Usage

<Seal title="Payment receipt">
  <>
          <p>Sunrise Academy</p>
          <p>Code: 8H2K-44QF</p>
          <p>March 4, 2026</p>
        </>
</Seal>

Props

Prop	Type	Default	Description
`title`	`ReactNode`		Heading of the stamp, set in small caps-style capitals.
`icon`	`ReactNode`		Decorative glyph before the title (`aria-hidden`).
`tone`	`SealTone`	`"accent"`	Frame and title colour. `institutional` is the strong neutral (ink frame) for official seals that must not read as a status; any other name resolves through `tonePalettes`.
`label`	`string`		Accessible name. Set it and the seal becomes a labelled `group`; without it the seal is plain text content the reader encounters in order.
`classNames`	`Partial<Record<SealPart, string>>`		Per-part classes merged with `cn`; consumer classes win. `className` still targets the root.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

Source

packages/ui/src/atoms/seal/seal.tsx