Photonix

GoalWidget

A widget for tracking progress towards a specific goal or target.

Preview

Monthly Revenue Goal

Target for Q4 2024

75%

Target: $10,000

Current: $7,500

75%

Usage
import { GoalWidget } from '@photonix/ultimate';

<GoalWidget
  title="Monthly Revenue Goal"
  value={75}
  targetLabel="$10,000"
  currentLabel="Current: $7,500"
/>

Component API

GoalWidget

Prop
Type
Default
Description
title
string
-
subtitle
string
-
value
number
-
currentLabel
string
-
targetLabel
string
-
progressLabel
string
-
actions
React.ReactNode
-
loading
boolean
false
Loading state
appearance
WidgetAppearance
'outlined'
Widget appearance
padding
string | number
-
Widget padding (default: 16px)
style
React.CSSProperties
-
Custom style
className
string
-
Custom class name
footer
React.ReactNode
-
color
"primary" | "mint" | "purple" | "brand" | "success" | "error" | "warning"
-

Variants

Standard Goal

Standard tracking with title, progress bar, and labels.

Sales Target

65%

Target: 1,000 Sales

Current

65%

Standard Goal
<GoalWidget
  title="Sales Target"
  value={65}
  targetLabel="1,000 Sales"
/>

Loading State

Displays a skeleton preview while data is being fetched.

Annual Target

Loading State
<GoalWidget title="Annual Target" loading value={0} />

With Footer

Add extra information or actions using the footer prop.

Project Completion

Phase 2 of 5

8 tasks remaining across 3 teams

With Footer
<GoalWidget
  title="Project Completion"
  value={42}
  progressLabel="Phase 2 of 5"
  footer="8 tasks remaining across 3 teams"
/>

On this page

Preview
Component API
Variants
Standard Goal
Loading State
With Footer
Photonix UI - React Components, Templates & Figma Design System