# Seal

> An official-looking stamp: a heavy tone-colored frame with a title and the lines that vouch for a document (issuer, code, date).

Source: https://ui.jcsoftdev.com/docs/components/seal

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

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

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

## Usage

```tsx
<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

- [Default](/storybook/?path=/story/atoms-seal--default)
- [Labelled](/storybook/?path=/story/atoms-seal--labelled)
- [Tones](/storybook/?path=/story/atoms-seal--tones)
- [Institutional](/storybook/?path=/story/atoms-seal--institutional)

## Source

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