Result
@xui/resultA result / status page — status glyph, title, subtitle, body content and an [xuiResultExtra] action slot. Covers success/error/warning/info and the 404/403/500 HTTP codes.
Install
pnpm add @xui/result Add the barrel to a standalone component's imports:
import { XuiResultImports } from '@xui/result';
@Component({
imports: [XuiResultImports],
// …
})Examples
Success
Loading preview…
<xui-result status="success" title="Payment received" subtitle="Order #1024 is confirmed and on its way.">
<button xuiButton color="primary" xuiResultExtra>Go to orders</button>
<button xuiButton xuiResultExtra>Buy again</button>
</xui-result>Error
Loading preview…
<xui-result status="error" title="Submission failed" subtitle="Please check the highlighted fields and try again.">
<button xuiButton color="primary" xuiResultExtra>Try again</button>
</xui-result>Not found
Loading preview…
<xui-result status="404" title="Page not found" subtitle="Sorry, the page you visited does not exist.">
<button xuiButton color="primary" xuiResultExtra>Back home</button>
</xui-result>API
A result / status page — a large status glyph over a title and subtitle, with optional body content and an [xuiResultExtra] action slot. status picks the icon and tint (success/error/info/warning) or shows an HTTP code (404/403/500).
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''statusXuiResultStatusWhat happened. Picks the glyph and its tint; the HTTP codes render as the number itself.this.config.statustitlestringThe headline — what the outcome was.''subtitlestringSupporting detail under the title. Project buttons as content for what to do next.''