Review published
Other readers can see it now.
<script setup lang="ts">
import { Button, Result } from '@hina-ui/vue'
</script>
<template>
<Result
status="success"
title="Review published"
description="Other readers can see it now."
class="w-96"
>
<template #actions>
<Button size="sm">View review</Button>
<Button size="sm" variant="ghost" tone="neutral">Back to shelf</Button>
</template>
</Result>
</template>
Usage
import { Result } from '@hina-ui/vue'
status sets the icon and colour, title states the outcome and description adds the consequence or the next step. The layout is the same as Empty: icon, text and actions stack in the centre, and the component fills the width of its container.
Under review
Usually done within a day; you will be notified.
<script setup lang="ts">
import { Result } from '@hina-ui/vue'
</script>
<template>
<Result
title="Under review"
description="Usually done within a day; you will be notified."
class="w-96"
/>
</template>
Examples
Status
Four statuses: success, error, warning and info, with info as the default.
Saved
Your changes are live.
Not saved
The connection dropped; try again later.
Partly saved
Two changes conflict with someone else's.
Awaiting review
You will be notified once it is approved.
<script setup lang="ts">
import { Grid, Result } from '@hina-ui/vue'
</script>
<template>
<Grid :cols="2" gap="md" class="w-full max-w-2xl">
<Result status="success" size="sm" title="Saved" description="Your changes are live." />
<Result
status="error"
size="sm"
title="Not saved"
description="The connection dropped; try again later."
/>
<Result
status="warning"
size="sm"
title="Partly saved"
description="Two changes conflict with someone else's."
/>
<Result
status="info"
size="sm"
title="Awaiting review"
description="You will be notified once it is approved."
/>
</Grid>
</template>
Actions
The actions slot holds what to do next, usually one primary button and perhaps a secondary one.
Payment not completed
The bank did not confirm the transaction; nothing was charged.
<script setup lang="ts">
import { Button, Result } from '@hina-ui/vue'
</script>
<template>
<Result
status="error"
title="Payment not completed"
description="The bank did not confirm the transaction; nothing was charged."
class="w-96"
>
<template #actions>
<Button size="sm">Pay again</Button>
<Button size="sm" variant="ghost" tone="neutral">Contact support</Button>
</template>
</Result>
</template>
Extra content
Content in the default slot shows under the text, for details such as an order number or an error report.
Order placed
We will notify you when it ships.
Order HN-20260907-0412
<script setup lang="ts">
import { Button, Code, Result, Text } from '@hina-ui/vue'
</script>
<template>
<Result
status="success"
title="Order placed"
description="We will notify you when it ships."
class="w-96"
>
<Text size="sm" tone="muted">
Order
<Code>HN-20260907-0412</Code>
</Text>
<template #actions>
<Button size="sm" variant="soft" tone="neutral">View order</Button>
</template>
</Result>
</template>
Custom icon
The icon slot replaces the status icon with another icon or an illustration.
Today's goal reached
Seven days in a row of thirty minutes.
<script setup lang="ts">
import { Button, Image, Result } from '@hina-ui/vue'
</script>
<template>
<Result
title="Today's goal reached"
description="Seven days in a row of thirty minutes."
class="w-96"
>
<template #icon>
<Image src="/avatars/hug.webp" :ratio="1" class="size-24 rounded-full" />
</template>
<template #actions>
<Button size="sm">Keep reading</Button>
</template>
</Result>
</template>
Sizes
Three sizes change the icon, text and padding together; lg is for a whole result page.
Saved
Your changes are live.
Saved
Your changes are live.
Saved
Your changes are live.
<script setup lang="ts">
import { Result, Stack } from '@hina-ui/vue'
</script>
<template>
<Stack gap="lg" class="w-96">
<Result status="success" size="sm" title="Saved" description="Your changes are live." />
<Result status="success" title="Saved" description="Your changes are live." />
<Result status="success" size="lg" title="Saved" description="Your changes are live." />
</Stack>
</template>
Accessibility
- The icon is decorative and hidden from assistive technology; the status is conveyed by the title and description.
- The root element carries
data-statuswith the same value asstatus.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'success' | 'error' | 'warning' | 'info' | 'info' | Status of the outcome |
title | string | — | Title |
description | string | — | Text under the title |
size | 'sm' | 'md' | 'lg' | 'md' | Size |
class | string | — | Extra classes on the root element |
Slots
| Slot | Description |
|---|---|
| default | Extra content under the text |
icon | An icon or illustration replacing the status icon |
actions | Actions at the bottom |