Aurora

Error state ​

When a page or a whole section can't load, this is what goes in its place: a centered heading, a sentence explaining what happened, and the buttons that get someone unstuck. It fills the space the content would have taken, so it stands in for a region rather than sitting inside one the way a banner does.

ts
import { ErrorState } from '@scaler-tech/aurora/error-state'

Demo ​

We couldn't load your assets

The portfolio data didn't come back from the server. Trying again usually sorts it out — if it doesn't, the homepage is a safe place to land.

API ​

PropTypeDefaultDescription
titlestring—Required. The heading, rendered heading-2-medium
descriptionstring—Required. The explanation below it, paragraph-md, width-capped at max-w-md

The default slot is the action row: zero or more Buttons in a centered horizontal row. Leave it out and the row doesn't render at all.

Usage ​

vue
<ErrorState
    title="We couldn't load your assets"
    description="The portfolio data didn't come back from the server. Try again, or head back to the homepage."
>
    <Button variant="primary" @click="retry">Try again</Button>
    <Button variant="tertiary" @click="goHome">Go to homepage</Button>
</ErrorState>

Incorrect / Correct ​

Incorrect (hand-rolled centered block — its typography and spacing drift from every other failure screen):

vue
<div class="flex flex-col items-center gap-4 py-16 text-center">
    <h2 class="heading-2-medium text-primary">Something went wrong</h2>
    <p class="paragraph-md text-secondary">We couldn't load your assets.</p>
    <Button variant="primary" @click="retry">Try again</Button>
</div>

Correct (one component owns the heading level, the description width cap, and the action row):

vue
<ErrorState title="Something went wrong" description="We couldn't load your assets.">
    <Button variant="primary" @click="retry">Try again</Button>
</ErrorState>

Gotchas ​

  • In a short container it looks oversized and shoves everything below it down: min-h-[400px] is baked into the root with no prop to shrink it. Give it a page or a full region, not a card.
  • Markup in title or description renders as literal text — both are plain string props with no slot alternative, so a link in the explanation has to become a Button in the slot.
  • The action row centers its buttons and never wraps into a column, so three or more crowd on narrow screens. Keep it to a primary recovery plus one escape hatch, like AppErrorBoundary.