Result is Ant Design's Result, installed into your project as a file you own. It takes the same props and adds appearance and accent, marked antuikit in the API table. status also takes the kit's own statuses, like 401, 429 and offline, each with its own illustration. success, error, info and warning draw their icon from your icon pack.
Install
npx antuikit@latest init
npx antuikit@latest add result
The first command installs AntuikitProvider and the theme tokens. The second adds this component.
Import
Import from @/components/ui/result, not from antd. The file lives in your project once installed.
import { Result } from "@/components/ui/result"
The axes
Result has one axis, status, with seven values and a default of info.
success, error, info and warning draw an icon from your icon pack, filled where the pack has a filled version, in the matching status color.
403, 404 and 500 draw a built-in illustration. They accept the number or the string.
The illustrations are not re-exported. Import Result.PRESENTED_IMAGE_404 (or _403 and _500) from antd to use a drawing outside a Result.
Flags
Result has no boolean props. icon is the nearest thing to a switch, and it reads three ways.
undefined: the four icon statuses get your pack's icon.
null or false: no icon.
Any other node: your icon, whatever the status.
icon has no effect on 403, 404 and 500. The illustration always renders.
Slots
Five props take a node. They render top to bottom in this order.
icon is the mark above the title. A pack icon you pass renders at the text size, so add text-(length:--ant-result-icon-font-size) to match the status icons. It takes the status color on its own.
title and subTitle are the headline and the line under it. Both are divs, not headings, and neither takes space when left out.
extra is the action row. It takes one node or an array, and an array needs a key on each child.
children renders below the actions, in a tinted panel.
Events
Result has no event props. The API table below lists what it forwards to the element it renders.
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector.
1
<Result
2
classNames={{
3
root: "…",
4
title: "…",
5
subTitle: "…",
6
body: "…",
7
extra: "…",
8
icon: "…",
9
}}
10
/>
A Tailwind class on one of these keys wins over the default styles without !important. Setting a component token's CSS variable on the root has no effect, so set the token in your theme or style the part.
API Reference
Result
Result's props. Rows marked antuikit in the Version column are added by the kit.