registry:ui · General
result — the thin outcome surface
Status glyph + title + description + actions — no routing logic, no illustration system. empty is not result: no-data vs operation-outcome stay different components.
result
result — the thin outcome surface
Build failed
The bundle exceeded the size budget by 12 KB.
<Result status="success" title="Deployed" description="build 4f2a is live">
{#snippet actions()}<PressButton href="/">view site</PressButton>{/snippet}
</Result>types
Outcome states
Result distinguishes success, error, warning and info without taking over routing or recovery logic.
result · states
Deployed
Build failed
Deprecated API
No changes
<script lang="ts">
import Result from '@ui/result.svelte';
</script>
<div class="grid gap-4 md:grid-cols-2">
<Result status="success" title="Deployed" />
<Result status="error" title="Build failed" />
</div>usage
Usage
<Result status="success" title="Deployed" description="build 4f2a is live">
{#snippet actions()}<PressButton href="/">view site</PressButton>{/snippet}
</Result>a11y
Accessibility
ARIA
| Attribute | Value | Description |
|---|---|---|
| status | visible glyph and title | Status is communicated with text, not color alone. |
| actions | native controls | Keep recovery actions keyboard reachable. |
theming
Density and tokens
No changes
No changes
No changes
| Token | Default | Source |
|---|---|---|
| --jx-gap | density scale | density |
| --jx-stack | density scale | density |
| --jx-inset | density scale | density |
| --jx-icon | density scale | density |
| --jx-text | density scale | density |
| --jx-line | density scale | density |
axes
Universal props
The eight-axis surface (explicit-props): size · shape · radius · density · color · theme · elevation · motion — each axis takes named steps, auto (inherit the ambient context; stamps nothing), an exact number (px · coefficient · dp · hue per axis), or query() for responsive/container-conditional values. The outcome panel is flat content, all no-own; the size axis scales the root and the supply chain is the point.
Result · universal props
axes joined
One number moves the outcome panel.
named steps
medium/large resolve through the alias-ladder vars.
<Result size={18} density="small">…</Result>api
Result props
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| title * | string | — | Outcome heading. |
| status | 'success' | 'error' | 'warning' | 'info' | 'info' | Outcome tone and glyph. |
| description | string | — | Optional supporting copy. |
| icon | Snippet | — | Replaces the default glyph. |
| actions | Snippet | — | Renders next steps. |
Universal props
| Property | Type | Default | Description |
|---|---|---|---|
| size | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | the base scale — root font-size; parts size in em |
| shape | 'round' | 'scoop' | 'bevel' | 'notch' | 'square' | 'squircle' | 'auto' | 'auto' · ambient scope | corner geometry (CSS corner-shape; §14 degrade table) |
| radius | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | corner size; auto = the concentric broadcast (§3) |
| density | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | spacing/leading scale over the kernel channels (§4) |
| color | 'primary' | 'secondary' | 'error' | 'warn' | 'success' | 'info' | 'auto' | number | string | 'auto' · ambient scope | the hue axis of the fixed oklch primary system (§5) |
| theme | 'light' | 'dark' | 'system' | 'auto' | 'auto' · ambient scope | light/dark profile; system = the JS-mutable global (§6) |
| elevation | 'level-1' | 'level0' | 'level1' | 'level2' | 'level3' | 'level4' | 'level5' | 'auto' | number | 'auto' · ambient scope | official M3 levels over the surface ladder (§7) |
| motion | 'reduced' | 'subtle' | 'normal' | 'expressive' | 'auto' | number | 'auto' · ambient scope | intensity across the motion kernels (§8) |