# Result

An empty state or result display with icon, title, and optional content. Supports status presets with built-in icons.

## When to Use

- Empty states (no data, no results)
- Success/error feedback after actions
- 404, 403, 500 error pages
- Informational messages

## Component

---

### Properties

- **`status`** `'success' | 'error' | 'info' | 'warning' | 404 | 403 | 500` (default: `'info'`) — Predefined status with corresponding icon
- **`title`** `ReactNode` — Main title text
- **`subtitle`** `ReactNode` — Secondary text below the title
- **`subTitle`** `ReactNode` — Deprecated: use `subtitle` instead
- **`icon`** `ReactNode` — Custom icon (overrides status icon)
- **`isCompact`** `boolean` (default: `false`) — Compact horizontal layout
- **`children`** `ReactNode` — Additional block content, e.g. a set of action buttons

### Style Defaults

- `display` — `flex` (switches to `grid` when `isCompact`)
- `flow` — `column`
- `placeContent` — `center` (switches to `start` when `isCompact`)
- `placeItems` — `center` (switches to `start` when `isCompact`)
- `gap` — `3x` (switches to `2x 1x` when `isCompact`)
- `padding` — `6x 4x` (switches to `0` when `isCompact`)
- `textAlign` — `center` (switches to `left` when `isCompact`)
- `width` — `max 80ch` (caps the readable line length; override via the `width` prop)
- `margin` — `0 auto` (centers Result horizontally within its parent; switches to `0` when `isCompact`)

### Base Properties

Supports [Base properties](../../BaseProperties.md).

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Examples

### Info

### Warning

### Error

### Custom Icon

### Custom Title

### Compact

### Width Limit

The default `width: max 80ch` keeps long copy in a comfortable reading column even inside a much wider parent. Override the cap by passing your own `width`.

## Differences from Ant Design

| There are differences | Ant Design property | Cube UIKit property |
| :-------------------: | :-----------------: | :-----------------: |
|          No           |      `status`       |      `status`       |
|          No           |       `title`       |       `title`       |
|          Yes          |     `subTitle`      |     `subtitle`      |
|          No           |       `icon`        |       `icon`        |
|          Yes          |       `extra`       |     `children`      |
