Result Panel

Inline result display for win/lose/info states.

Compact mode

✓

You Won!

$ 1,500

Congratulations on your victory!

Features

• Three states — Win, Lose, Info with semantic colors
• Compact mode — Reduced padding for dense layouts
• Action slot — Add buttons or custom actions
• Accessible — Uses role="status" and aria-live

Usage

<script setup>
import { FkResultPanel, FkButton } from '@fortune-kit/components'
</script>

<template>
  <FkResultPanel
    type="win"
    title="You Won!"
    :amount="1500"
    currency="$"
    subtitle="Congratulations on your victory!"
  >
    <template #actions>
      <FkButton variant="success">Claim</FkButton>
    </template>
  </FkResultPanel>
</template>

Props

Prop	Type	Default	Description
type	'win' | 'lose' | 'info'	'info'	Result type
title	string	Required	Main title
subtitle	string	—	Additional text
amount	number	—	Value to display
currency	string	—	Currency symbol
compact	boolean	false	Compact mode

Slots

Slot	Description
default	Content below subtitle
icon	Custom icon replacement
actions	Action buttons

When to Use

• FkResultPanel — Inline display within page content
• FkResultModal — Full-screen overlay for important results
• FkResultToast — Non-blocking notification