# Result

> Large-illustration result / empty-state. Built-in statuses: success / warning / error / info / empty. Plus ready-made `<wr-result-404>`, `<wr-result-403>`, `<wr-result-500>` presets.

Source: https://ngwr.dev/reference/components/result

## Installation

```angular-ts
import { WrResult, WrResult404, WrResult403, WrResult500 } from 'ngwr/result';

@Component({ imports: [WrResult, WrResult404, WrResult403, WrResult500] })
export class MyComponent {}
```

## Statuses

```angular-html
<wr-result status="success" title="Submitted!" description="We'll be in touch.">
  <button wr-btn color="primary" wrResultExtra>Continue</button>
</wr-result>
```

## With an action

Project a control into the `wrResultExtra` slot to give the user a next step — e.g. a confirm screen with a primary button.

```angular-html
<wr-result status="success" title="Submitted!" description="We'll be in touch.">
  <button wr-btn color="primary" wrResultExtra>Continue</button>
</wr-result>
```

## Presets

Drop-in 404 / 403 / 500 pages. Pass `title` / `description` to override the defaults for localisation.

```angular-html
<!-- Pre-built variants for the common HTTP statuses. Override
     title / description for localisation. -->
<wr-result-404 />
<wr-result-403 />
<wr-result-500 />

<!-- Custom copy: -->
<wr-result-404 title="Lost?" description="That URL didn't lead anywhere." />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `title` | — | `string` | `''` |
| `description` | — | `string` | `''` |
| `status` | — | `WrResultStatus` | `'info'` |