Preview Updated 2026-05-10

Result

Full-page feedback for completed / failed / exception states — submission outcomes, 404 / 403 / 500 placeholders, etc.

Basic usage

status controls the icon and default title; #extra (Vue) / the extra prop (React) hosts follow-up action buttons.

提交成功

申请已发送给管理员，预计 1 个工作日内处理。

<CfResult status="success" title="Submitted" description="Your request has been sent to the admin and should be processed within one business day.">
<template #extra>
  <CfButton variant="primary">Back home</CfButton>
  <CfButton variant="tertiary">Submit another</CfButton>
</template>
</CfResult>

<CfResult
status="success"
title="Submitted"
description="Your request has been sent to the admin and should be processed within one business day."
extra={<>
  <CfButton variant="primary">Back home</CfButton>
  <CfButton variant="tertiary">Submit another</CfButton>
</>}
/>

Exception states

404 / 403 / 500 share one set of state illustrations; colors follow the semantic tokens.

404 页面不存在

页面可能已移动或被删除。

403 无权访问

当前账号没有访问权限。

500 服务器开小差了

服务暂时不可用，请稍后重试。

<CfResult status="404" size="sm" description="The page may have moved or been deleted." />
<CfResult status="403" size="sm" description="Your account doesn't have access." />
<CfResult status="500" size="sm" description="The service is temporarily unavailable. Please try again later." />

<CfResult status="404" size="sm" description="The page may have moved or been deleted." />
<CfResult status="403" size="sm" description="Your account doesn't have access." />
<CfResult status="500" size="sm" description="The service is temporarily unavailable. Please try again later." />

API

Prop	Type	Default	Description
`status`	`'success' \| 'info' \| 'warning' \| 'error' \| '404' \| '403' \| '500'`	`'info'`	Status semantic; mapped to a default illustration and default title
`title`	`string`	The default copy associated with `status`	Main title
`description`	`string`	`—`	Subtitle
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Overall size

Slot (Vue) / prop (React): icon for a custom icon, extra for the action area.