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>

Props

Result

Property	Type	Default	Description
status	'success' | 'error' | 'info' | 'warning' | 'empty'	'info'	Action feedback status, controlling the color and graphic of the status emblem
title	string	''	Result title text
subTitle	string	''	Secondary description text
variant	'plain' | 'card'	'card'	Whether to render card chrome with border and hard shadow
iconSize	IconSize	—	Status icon size

Slots

Result

Slot	Description
icon	Customize/override the status emblem icon box
title	Customize/override the result title content
subTitle	Customize/override the secondary description content
extra	Custom footer action area layout