# Tile

Canonical page: https://docs.ovok.com/native-sdk/guide/components/tile

The Tile module provides interactive measurement display components designed for healthcare applications. It offers a complete solution for displaying measurement data, device status, and task progress with visual feedback and animations.

## Overview [#overview]

The Tile module is built using a compound component pattern, providing maximum flexibility for different measurement types and device states while maintaining visual consistency across your healthcare application.

### Key Features [#key-features]

- **Measurement Display**: Show measurement values, units, and timestamps
- **Device Status**: Visual indicators for device connectivity and measurement progress
- **Task Management**: Progress tracking with completion states and animations
- **Interactive States**: Visual feedback for measuring, connected, and completed states
- **Icon Support**: Pre-built measurement type icons for various healthcare devices
- **Animation Support**: Smooth completion animations and loading spinners
- **Theme Integration**: Consistent styling with Material Design 3 theming
- **Accessibility boundary**: Add screen-reader labels, roles, and touch-target
  behavior in the app; the module does not add complete semantics automatically
- **TypeScript**: Full type safety throughout all components

## Components [#components]

### Main Container [#main-container]

- **[Tile](/native-sdk/guide/components/tile/tile/)** - Main container component with state management

### Content Components [#content-components]

- **[Tile.StartSection](/native-sdk/guide/components/tile/start-section/)** - Header section with task icon and completion state
- **[Tile.Title](/native-sdk/guide/components/tile/title/)** - Task title display component
- **[Tile.TaskIcon](/native-sdk/guide/components/tile/task-icon/)** - Measurement type icons for various healthcare devices
- **[Tile.MeasuredValue](/native-sdk/guide/components/tile/measured-value/)** - Display measurement values with units and time
- **[Tile.MeasuringSpinner](/native-sdk/guide/components/tile/measuring-spinner/)** - Loading indicator during measurements
- **[Tile.NoMeasuredValue](/native-sdk/guide/components/tile/no-measured-value/)** - Placeholder for missing measurements
- **[Tile.Status](/native-sdk/guide/components/tile/status/)** - Device connection status indicator
- **[Tile.CompleteAnimation](/native-sdk/guide/components/tile/complete-animation/)** - Success animation for completed measurements

## Common Patterns [#common-patterns]

### Measurement Flow States [#measurement-flow-states]

The Tile component supports several common measurement flow states:

1. **Not Started**: Shows task icon, title, and "No data" placeholder
2. **Device Connected**: Shows connection status when device is ready
3. **Measuring**: Shows spinner animation during active measurement
4. **Completed**: Shows measured value with timestamp
5. **Success Animation**: Optional celebration animation on completion

### Measurement Types Support [#measurement-types-support]

The component supports various healthcare measurement types:

- Blood Pressure (`MeasurementTypeKey.bloodPressure`)
- Blood Glucose (`MeasurementTypeKey.bloodGlucose`)
- Body Weight (`MeasurementTypeKey.bodyWeight`)
- Temperature (`MeasurementTypeKey.temperature`)
- Heart Rate (`MeasurementTypeKey.heartRate`)
- ECG (`MeasurementTypeKey.ecg`)
- Blood Oxygen (`MeasurementTypeKey.bloodOxygenPulseRate`)
- Step Count (`MeasurementTypeKey.stepCount`)
- And many more...