display
js/ui/components/display.ts
Host-neutral cards, statistics, status indicators, and empty states. @internal
Interfaces
interface CardProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Card}.
Properties
title?: string
subtitle?: string
image?: { src: string; alt: string }
actions?: Child
children?: Child
interface StatProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Stat}.
Properties
label: string
value: string
hint?: string
trend?: Trend
interface StatusDotProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link StatusDot}.
Properties
status: StatusDotStatus
label?: string
interface EmptyStateProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link EmptyState}.
Properties
icon?: string
title: string
description?: string
action?: Child
icons?: Record<string, IconForms>
Per-name icon registry overrides.
Functions
function Card(props: CardProps): VNode
Content surface with optional media, header, body, and action slots.
function Stat(props: StatProps): VNode
Named statistic with an optional non-color-only trend indicator.
function StatusDot(props: StatusDotProps): VNode
Status glyph with an optional label.
function EmptyState(props: EmptyStateProps): VNode
Centered presentation for an empty content area.
Types
type Trend = 'up' | 'down' | 'flat'
Trend direction shown by {@link Stat}.
type StatusDotStatus = 'ok' | 'busy' | 'error' | 'idle' | 'warning'
Status values shown by {@link StatusDot}.