Result

Result is a centered outcome panel: success, info, warning, error, or a 404 state. Spacing follows Empty large. It is not an alert.

Demos

Success

The icon sits in a 16% semantic wash with a pressed-tone glyph. Actions use the same row as Empty: a primary Button and an optional ghost.

View courseBack to list

<gk-result
  status="success"
  title="Submitted"
  description="Your course was sent for review. We will reply within 1–2 business days."
>
  <gk-button slot="action">View course</gk-button>
  <gk-button slot="extra" variant="ghost">Back to list</gk-button>
</gk-result>

Info, warning, error, 404

status picks the icon and wash. 404 uses a soft brand circle and a Fraunces “404” mark.

<gk-result status="info" title="Notice"></gk-result>
<gk-result status="warning" title="Please check"></gk-result>
<gk-result status="error" title="Something failed"></gk-result>
<gk-result status="404" title="Page not found"></gk-result>

404 panel

Result does not route. The action slot belongs to the app.

HomeContact support

<gk-result
  status="404"
  title="Page not found"
  description="This address may have moved. Go home, or search for what you need."
>
  <gk-button slot="action">Home</gk-button>
  <gk-button slot="extra" variant="ghost">Contact support</gk-button>
</gk-result>

Custom icon

The icon slot replaces the built-in glyph. The title stays the accessible name, and the icon is aria-hidden when a title is present.

<gk-result status="info" title="Custom icon">
  <svg slot="icon" viewBox="0 0 24 24" aria-hidden="true"><!-- your glyph --></svg>
</gk-result>

API

Result Props

Prop	Type	Default
status	'success' | 'info' | 'warning' | 'error' | '404'	'info'
title	string	''
description	string	''

Result Slots

Name	Description
icon	Replaces the status glyph
extra / action	Action row, usually gk-button
default	Extra body under the description

CSS Parts

Part	Description
root	Centered column, Empty-large padding
icon	72px circle. aria-hidden when a title is set
title	Fraunces heading
description	Muted supporting copy
extra	Action row

There is no role="alert". For a finished async task, the app may set role="status" on the host.

Accessibility

• The title is an h2 and the accessible name.
• The icon is decorative when a title is present.
• Action buttons bring their own names and focus rings.