Widgets
Stat card
A single headline figure with an optional trend, the tile a dashboard is built from.
Not documented yet
This component ships in the design system and is fully supported. What is missing is the guidance around it: when to reach for it, the do and don't, and the accessibility notes. Until that is written, Storybook is the reference for variants, props and live controls.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | Metric label, e.g. "Active members". |
valuerequired | React.ReactNode | — | Primary value, e.g. "12,480". |
icon | "insurer" | "corporateOrganisation" | "partneredProviders" | "revenue" | "searchMembers" | "treatments" | "tickets" | "financeMenu" | "emailTemplates" | "masterFile" | "sms" | "claims" | "guaranteeLetters" | "financeTransactions" | "payments" | "signatures" | "reports" | "administration" | "action" | "menu" | "debugTools" | "exportToExcel" | "download" | "import" | "upload" | "upgrade" | "search" | "nextPage" | "previousPage" | "lastOfThePages" | "firstOfThePages" | "refresh" | "expandDown" | "expandRight" | "collapseUp" | "createNew" | "addNew" | "addNewProfile" | "information" | "email" | "folderClose" | "folderOpen" | "print" | "generateReport" | "share" | "bank" | "messageReceivedOnly" | "messageCanReply" | "pdpa" | "security" | "healthRelatedInsurance" | "tutorial" | "referralLetter" | "fieldDropDown" | "navigationDown" | "navigationUp" | "filterExpand" | "filterCollapse" | "externalLink" | "receipt" | "covid19Screening" | "collateral" | "creditLimitAndBalance" | "billingOverview" | "memberInformation" | "employees" | "medicalLeaves" | "analysis" | "comparison" | "homepage" | "dashboard" | "benefitGroups" | "makePayments" | "principal" | "dependants" | "remove" | "delete" | "approve" | "reject" | "cancel" | "delegate" | "batchAction" | "switchAccount" | "calendar" | "insurance" | "department" | "subsidiary" | "billingAccount" | "claimPolicies" | "default" | "globalUniversal" | "edit" | "allow" | "deny" | "addOn" | "revenueSubscription" | "help" | "contact" | "changePassword" | "manageAccount" | "login" | "loginActivities" | "logout" | "hospital" | "pharmacy" | "prescription" | "ultrasound" | "languages" | "map" | "details" | "properties" | "confirmation" | "newCheckIn" | "patientCheckIns" | "allGood" | "transactions" | "patient" | "lateClaims" | "doctors" | "outpatientSpecialist" | "inpatientHospitalisation" | "roles" | "users" | "auditLogs" | "ascending" | "descending" | "chart" | "mobileAppEnabled" | "reimbursementClaims" | "preEmployment" | "gp" | "dental" | "optical" | "specialist" | "hospitalisation" | "maternity" | "healthScreening" | "pharmacy2" | "customTreatments" | "allergyAndImmunology" | "anaesthesiology" | "cardiologyAndAngiology" | "dentistry" | "dermatology" | "emergencyDepartment" | "endocrinology" | "gastroenterologyAndHepatology" | "generalSurgery" | "geriatricMedicine" | "haematology" | "infectiousDisease" | "internalMedicine" | "nephrology" | "neurology" | "obstetricsAndGynaecology" | "occupationalHealthAndVaccine" | "oncology" | "ophthalmology" | "oralAndMaxillofacial" | "orthopaedic" | "ent" | "paediatricDentistry" | "paediatrics" | "podiatry" | "psychiatry" | "pulmonologyAndRespiratory" | "radiologyAndImaging" | "reconstructivePlastic" | "rehabilitationMedicine" | "rheumatology" | "urology" | "vascularSurgery" | "xRay" | "femaleDoctorAvailable" | "open24Hours" | "covidTestRtk" | "covidTestPcr" | undefined | — | Optional leading product icon. |
trend | "up" | "down" | "flat" | undefined | — | Trend direction; colours and arrow follow it. |
trendValue | string | undefined | — | Trend value text, e.g. "+4.2%". |
upIsGood | boolean | undefined | true | Whether an upward trend is good. Inverts the trend colour for cost-like metrics (e.g. average approval time), where a downward trend should read as positive. |