PhiaUi.Components.ResultState (phia_ui v0.1.17)

Result state — centered page-level feedback with icon, title, description, and actions.

Inspired by Ant Design Result. Used for success confirmations, error pages, not-found states, forbidden access, and informational feedback.

Examples

<.result_state status={:success} title="Payment Complete!" description="Your order has been placed." >
  <:actions>
    <.button>Go to Orders</.button>
  </:actions>
</.result_state>

<.result_state status={:not_found} title="Page not found" />

<.result_state status={:error} title="Something went wrong" description="Please try again later.">
  <:extra><p class="text-xs text-muted-foreground">Error code: 500</p></:extra>
  <:actions><.button variant={:outline}>Contact support</.button></:actions>
</.result_state>

Summary

Functions

result_state(assigns)

Renders a centered full-page result state with large icon, title, description, and CTA buttons.

Functions

result_state(assigns)

Renders a centered full-page result state with large icon, title, description, and CTA buttons.

Used for success confirmations, error pages, empty/not-found states, and forbidden access screens. The component is always centered both vertically and horizontally within its container — wrap in a min-h-screen parent or use the PhiaUI.Shell layout to fill the full viewport.

Status → icon and color mapping

`:status`	Icon	Color
`:success`	`circle-check`	`text-green-500`
`:error`	`circle-x`	`text-red-500`
`:warning`	`triangle-alert`	`text-amber-500`
`:info`	`info`	`text-blue-500`
`:not_found`	`file-question`	`text-muted-foreground`
`:forbidden`	`shield-off`	`text-muted-foreground`

Examples

<%!-- Payment confirmation --%>
<.result_state
  status={:success}
  title="Payment Complete!"
  description="Your order has been placed. You'll receive a receipt by email."
>
  <:actions>
    <.button phx-click="go_to_orders">View Orders</.button>
    <.button variant={:outline} phx-click="continue">Continue Shopping</.button>
  </:actions>
</.result_state>

<%!-- 404 page --%>
<.result_state
  status={:not_found}
  title="Page not found"
  description="We couldn't find the page you're looking for."
>
  <:actions><.link navigate="/">Go home</.link></:actions>
</.result_state>

<%!-- Permission denied --%>
<.result_state
  status={:forbidden}
  title="Access denied"
  description="You don't have permission to view this page."
>
  <:extra>
    <p class="text-xs text-muted-foreground">Contact your administrator to request access.</p>
  </:extra>
  <:actions>
    <.button variant={:outline} phx-click="request_access">Request Access</.button>
  </:actions>
</.result_state>

Attributes

status (:atom) (required) - Controls the icon and color scheme. Must be one of :success, :error, :warning, :info, :not_found, or :forbidden.
title (:string) (required) - Primary heading.
description (:string) - Optional secondary description rendered below the title. Defaults to nil.
class (:string) - Additional CSS classes for the root element. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root <div>.

Slots

extra - Optional extra content below the description.
actions - Optional CTA buttons below the extra content.