Status

Centered status block for loading, success, error, and informational states.

Demo

Loading

Setting up a secure session.

Added $50.00

Your funds have arrived.

Onramp unavailable

Try again in a few minutes.

Review details

Confirm the payment method before continuing.

Usage

import { Status } from 'regen-ui'

export function CheckoutStatus() {
  return (
    <section className="flex flex-col items-center gap-[12px] px-[16px] py-[32px] text-center">
      <Status type="loading" />
      <h1 className="heading-20 text-foreground">Settling on Tempo</h1>
      <p className="copy-15 text-foreground-secondary">
        Finalizing the on-chain transfer.
      </p>
    </section>
  )
}

API Reference

Status.Props

iconOptional
TypeReactNode
DefaultNone
Custom decorative icon. Defaults to the icon for `type`.
typeOptional
Type'error' | 'info' | 'loading' | 'success'
Default'info'
Status tone and default icon.
Inherits HTMLAttributes<HTMLSpanElement>, except children, title.