Result

Used to inform the user about operational results (such as success, warning, system info, or failures). Features a distinct bold bordered square status box, robust header/description text, and action slot layouts.

Preview

Preview

成功状态 (Success)

支付成功

您的订单已支付完成，我们将在 24 小时内为您安排发货。您可以点击下方按钮查看物流详情。

错误状态 (Error)

提交失败

请检查您的表单输入，当前表单中包含冲突或格式不正确的配置。您可以修改后重新尝试。

警告与提示状态 (Warning / Info)

账户权限异常

检测到您的账户有安全隐患，请及时修改密码。

系统维护通知

本周六凌晨 2:00 - 4:00 系统将进行数据库维护。

Installation

pnpm dlx brutx-vue@latest add result

Usage

Basic Success Receipt

Show basic success receipts.

<script setup>
import { Result } from 'brutx-ui-vue'
</script>

<template>
    <Result
        status="success"
        title="Payment Succeeded"
        sub-title="Your payment has been cleared. Shipment will dispatch shortly."
    />
</template>

Action Controls

Inject buttons inside the #extra slot layout to allow further navigation or retries.

<template>
    <Result
        status="error"
        title="Submission Failed"
        sub-title="Gateway timeout occurred. Please modify settings and try submitting again."
    >
        <template #extra>
            <button class="btn btn-primary" @click="retry">Retry Now</button>
        </template>
    </Result>
</template>

Empty State

Result supports status="empty" and is the recommended entry for empty states.

<template>
    <Result
        status="empty"
        title="No data yet"
        sub-title="Create your first record and it will appear here."
    />
</template>

API Reference

Result — Props

Name	Type	Default	Description
status	"success" | "warning" | "info" | "error" | "empty" | undefined	"info"	Selects the result icon and color state: success, warning, info, error, or empty. An unknown runtime value falls back to info.
Details Declared type "success" | "warning" | "info" | "error" | "empty" | undefined Literal values "empty" "error" "info" "success" "warning" Default value details Declaration 'info' Source: packages/ui/src/components/result/Result.vue Resolved value "info" Source Result.vue:8 packages/ui/src/components/result/Result.vue
title	string | undefined	undefined	The result title text; it can be replaced by the title slot.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/result/Result.vue Resolved value undefined Source Result.vue:9 packages/ui/src/components/result/Result.vue
subTitle	string | undefined	undefined	The result subtitle or supporting description; it can be replaced by the subTitle slot.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/result/Result.vue Resolved value undefined Source Result.vue:10 packages/ui/src/components/result/Result.vue
variant	"card" | "plain" | undefined	"card"	Selects the card layout with border and hard shadow, or the plain layout without card chrome.
Details Declared type "card" | "plain" | undefined Literal values "card" "plain" Default value details Declaration 'card' Source: packages/ui/src/components/result/Result.vue Resolved value "card" Source Result.vue:11 packages/ui/src/components/result/Result.vue
iconSize	IconSize | undefined	undefined	Sets the status icon size. When omitted, the component uses its built-in 40px icon size.
Details Declared type IconSize | undefined Literal values "2xl" "lg" "md" "sm" "xl" "xs" Referenced types IconSize Type definition — IconSize export type IconSize = NonNullable<VariantProps<typeof iconSizeVariants>['size']> Default value details Declaration undefined Source: packages/ui/src/components/result/Result.vue Resolved value undefined Source Result.vue:12 packages/ui/src/components/result/Result.vue
titleAs	"h2" | "h3" | undefined	"h2"	Selects h2 or h3 as the semantic heading element for the title.
Details Declared type "h2" | "h3" | undefined Literal values "h2" "h3" Default value details Declaration 'h2' Source: packages/ui/src/components/result/Result.vue Resolved value "h2" Source Result.vue:13 packages/ui/src/components/result/Result.vue
class	string | undefined	undefined	Custom CSS classes appended to the result root container.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/result/Result.vue Resolved value undefined Source Result.vue:14 packages/ui/src/components/result/Result.vue

Result — Slots

Name	Signature or type	Description
#icon	{}	Replaces the default status icon and its icon box. This decorative icon area is hidden from assistive technology.
Details Declared type {} Source Result.vue packages/ui/src/components/result/Result.vue
#title	{}	Replaces the result title content structure.
Details Declared type {} Source Result.vue packages/ui/src/components/result/Result.vue
#subTitle	{}	Replaces the result subtitle content structure.
Details Declared type {} Source Result.vue packages/ui/src/components/result/Result.vue
#extra	{}	Renders additional actions or supporting content below the title and subtitle.
Details Declared type {} Source Result.vue packages/ui/src/components/result/Result.vue

Accessibility

• Semantic structure: The heading level is set via titleAs (h2/h3); the subtitle is rendered as a <p> description.
• Decorative icons: The status icon is marked aria-hidden so assistive technology does not announce meaningless icon names.
• Color is not the only signal: Status colors (--brutal-status-*) are decorative; the copy (title/subtitle) carries the meaning. Foreground follows the *-foreground token for contrast (success/info black-on-color 8.6:1 / 5.8:1, passing WCAG AA).
• Reduced motion: Respects prefers-reduced-motion; no motion-critical behavior.