# Success Seal

Success moment that stamps a seal onto the receipt, ticket or card that was just paid. Also works as a standalone hero above a title, and shows a clear cross on a decline.

> Composed · Free · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add success-seal
```

## Import

```tsx
import { SuccessSeal } from "@/components/ui/success-seal/success-seal";
```

## Variants

- `declined` — Declined: `npx @lumioui/cli add success-seal-declined`
- `payment` — Payment: `npx @lumioui/cli add success-seal-payment`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `size?` | `SuccessSealSize` | Seal size. Default "lg". |
| `tone?` | `SuccessSealTone` | Colour story. "destructive" swaps the check for a cross and refuses with a flicker. Default "success". |
| `animated?` | `boolean` | Play the choreography. Default true. |
| `children?` | `React.ReactNode` | Stamp mode: the object that was paid, sent or signed. The seal presses onto its corner, the object dips under it as light pools behind, then holds. Without children the seal is a hero above `title`. |
| `on?` | `boolean` | Stamp mode: lands when this turns true. Default true (lands on mount). |
| `radius?` | `number` | Stamp mode: corner radius of the stamped object (its clip). Default 24. |
| `title?` | `React.ReactNode` | Headline under the seal (hero mode). Pass nested <Text> to emphasise an amount. |
| `description?` | `React.ReactNode` | Supporting line under the headline (hero mode). |
| `onSettled?` | `() => void` | Fires once the result has landed and held (immediately when not animated). |
| `haptic?` | `boolean` | Land a notification haptic at contact. Default true. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/success-seal