Components
Result
A verdict drawn after the deed: the mark washes in the fixed pigment, the title rides the serif, and the extra carries the way onward. Any subset composes.
#Basic usage
The archive holds your letter
A copy has been sealed and shelved; you will hear back once it is read.
<script setup lang="ts">
import { Button, Result } from "@bysages/vue";
</script>
<template>
<Result.Root status="success" class="w-full">
<Result.Icon />
<Result.Title>The archive holds your letter</Result.Title>
<Result.Description>
A copy has been sealed and shelved; you will hear back once it is read.
</Result.Description>
<Result.Extra>
<Button variant="solid" tone="ink" size="sm">Back to the shelf</Button>
<Button variant="ghost" tone="ink" size="sm">Write another</Button>
</Result.Extra>
</Result.Root>
</template>
#Props
#SResultRoot
| Prop | Type | Default | Description |
|---|---|---|---|
status | String as PropType<Status> | "info" | The verdict the operation returned; the fixed pigments speak it. |
#SResultIcon
The mark carries all four verdicts and lets the root choose, so the icon can never drift from the status the root declares.
A styled part — no props of its own; it takes the anatomy's shared styling.
#ResultTitle
A styled part — no props of its own; it takes the anatomy's shared styling.
#ResultDescription
A styled part — no props of its own; it takes the anatomy's shared styling.
#ResultExtra
A styled part — no props of its own; it takes the anatomy's shared styling.