DataDisplay

A standardized label-value display for showing read-only data. Supports vertical and horizontal layouts, multiple sizes, and optional icons. Use this pattern for consistent data presentation in detail views and summary panels.

Import

import { DataDisplay } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<DataDisplay label="Email" value="john@example.com" />
 
<DataDisplay
  label="Status"
  value={<Badge variant="success">Active</Badge>}
  direction="horizontal"
/>
 
<DataDisplay
  label="Location"
  value="Bondi Beach"
  icon={<Icon name="MapPinIcon" />}
  size="lg"
/>

Props

Prop	Type	Default	Description
`label`*	string	-	Label text for the data field.
`value`*	ReactNode	-	Value to display. Can be text or any React node.
`icon`	ReactNode	-	Icon displayed before the label.
`className`	string	-	Additional CSS classes for the wrapper.
`direction`	'vertical' \| 'horizontal'	`'vertical'`	Layout direction. Vertical stacks label above value; horizontal places them side by side.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size variant controlling text and icon sizes.