Result

Default

Pass title and description and Result builds the header for you. The default slot stays yours, so whatever you put there renders straight after it.

Statuses

success draws the checkmark stroke. pending, info, and error swap the tint and the glyph, and animate the media without the draw.

Composed

Skip the title and description props and write the parts yourself when the outcome needs more than a header, for example a summary block between the message and the buttons.

With a reference

ResultReference renders the order or booking code under the description. It is layout only, so bring your own copy button.

Sizes

size scales the media and the title together. Use lg for a screen that is nothing but the outcome, sm for a card or a dialog.

Media variants

soft tints the circle with the status color, muted keeps it neutral, plain drops the circle and leaves the glyph. Pass icon to use any Iconify name instead of the built-in check.

Without animation

Set animate to false where something else already animates the entrance, such as a dialog that scales in. The reveal is pure CSS, so it also collapses on its own for users who ask for reduced motion.

Anatomy

Import all parts and piece them together.

<script setup>
import {
  Result,
  ResultActions,
  ResultContent,
  ResultDescription,
  ResultHeader,
  ResultMedia,
  ResultReference,
  ResultTitle,
} from "@/components/ui/result";
</script>

<template>
  <Result>
    <ResultHeader>
      <ResultMedia />
      <ResultTitle />
      <ResultDescription />
    </ResultHeader>
    <ResultReference />
    <ResultContent />
    <ResultActions />
  </Result>
</template>

API Reference

Accessibility

Keyboard shortcuts and ARIA behavior.