Result
A result feedback page supporting success, error, warning, info, plus 403/404/500 HTTP error page states — with dual title/description channels, a body slot, custom icons and size tiers.
Basic usage
Basic usage
Four states
Each of the four states comes with an original SVG icon on a circular tinted background; state colors follow semantic tokens (with dark variants).
Four states
HTTP error pages (403 / 404 / 500)
The status attribute supports 403 / 404 / 500 HTTP error scenarios, each with an original semantic glyph (padlock / question mark / server). Color mapping: 403→warning, 404→primary, 500→danger.
403 Forbidden
404 Not Found
500 Server Error
Rich description
Rich description content goes through the description slot, which overrides the attribute text when present.
Rich description (slot=description)
Body content (error detail list)
The default slot is the body content area between the description and the action area — the classic spot for listing error details.
Body content (error detail list)
- Recipient name is required
- The phone number format is invalid
- The invoice title does not match the tax ID
Custom icon
Passing a custom icon through the icon slot switches to a neutral state (the semantic tinted background and state color are removed, so the icon is fully custom) — useful for branded or special-purpose results.
Custom icon (slot=icon)
Size tiers
size provides small / medium / large (default medium), scaling both the icon diameter and typography.
Size tiers
Rich title
The title slot accepts rich content (for example a large status code composed with explanatory text), overriding the title attribute.
Rich title (slot=title)
API
oas-result
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
description | Description text | string | — |
size | Size preset small / medium (default) / large: scales icon diameter and font sizes | string | medium |
status | Status: success / error / warning / info / 403 / 404 / 500 (HTTP error pages with dedicated icons); invalid values fall back to success with a warning | string | success |
title | Title text (rendered into the visible title region; absorbed from the host on read so no native hover tooltip remains; pass an empty string to clear); use the "title" slot for rich content | string | — |
Slots
| Name | Description |
|---|---|
| default | Content area (error detail lists, etc.), placed between the description and the extra actions |
description | Rich description slot; overrides the description attribute when present |
extra | Action area, placed below the description |
icon | Custom icon (overrides the built-in status icon; switches to neutral styling without the tinted backdrop) |
title | Rich title content slot; overrides the title attribute text when present |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-result-desc-size | var(--oas-font-size-md) |
--oas-result-title-size | var(--oas-font-size-xl) |