# SvResult
A full result page: a centred icon, title, description, and actions for the
outcome of a flow - success, error, warning, info, or not-found. The
whole-screen counterpart to a toast.
`SvResult` gives a route or panel a clear terminal state: "Payment complete",
"Something went wrong", "404 - page not found". It ships a built-in icon per
status (overridable) and slots for actions and extra content, and themes from the
shared `--sg-*` tokens.
Related: [SvEmptyState](https://svgrid.com/docs/help/ui-components/sv-empty-state/) · [SvAlert](https://svgrid.com/docs/help/ui-components/sv-alert/) · [SvLoadingOverlay](https://svgrid.com/docs/help/ui-components/sv-loading-overlay/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvResult` starter into your app:
Prefer to see it first? `npx @svgrid/ui try result` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvResult` ships free in
`@svgrid/grid` (dependency-free):
The examples on this page import from `@svgrid/grid`:
```svelte
```
```ts
import { SvResult } from '@svgrid/grid'
```
## Example
> Live demo: Layout & feedback primitives - https://svgrid.com/demos/409-layout-feedback/
```svelte
{#snippet actions()}
Back to dashboard
View receipt
{/snippet}
```
## Props
| Prop | Type | Default | Description |
| ------------- | ---------------------------------------------------------- | ------- | ------------------------------------------------------- |
| `status` | `success` \| `error` \| `warning` \| `info` \| `notfound` | `info` | Picks the built-in icon and accent colour. |
| `title` | `string` | - | The headline (required). |
| `description` | `string` | - | Supporting line under the title. |
| `icon` | `Snippet` | - | Replace the built-in status icon. |
| `actions` | `Snippet` | - | Buttons row under the description (call to action). |
| `children` | `Snippet` | - | Extra content below the actions (details, links). |
## Accessibility
- The container is `role="status"` so the outcome is announced when it renders.
- The status icon is `aria-hidden` - the meaning comes from the `title` /
`description` text, not colour or icon alone.
## The five statuses
`status` picks the icon and tone. `actions` is the part people forget: an error
screen with no way forward is a dead end, and the retry button belongs here
rather than somewhere else on the page.
```svelte
{#snippet actions()}
(attempts += 1)}>
Retry{attempts ? ' (' + attempts + ')' : ''}
{/snippet}
```
## See also
- [SvEmptyState](https://svgrid.com/docs/help/ui-components/sv-empty-state/) - for "nothing here yet" rather than an outcome.
- [SvAlert](https://svgrid.com/docs/help/ui-components/sv-alert/) - an inline status banner within a page.
- [SvToaster](https://svgrid.com/docs/help/ui-components/sv-toaster/) - transient, non-blocking status messages.
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-components/sv-result/ . All docs: https://svgrid.com/llms.txt