# DiaryCard.NoData

Canonical page: https://docs.ovok.com/native-sdk/guide/components/diary/no-data

The `DiaryCard.NoData` component displays a localized message indicating that no measurement data is available. It provides consistent empty state messaging for diary cards with internationalization support and theme-aware styling.

## Basic Example [#basic-example]

```tsx
import { MeasurementTypeKey } from "@ovok/core/next";
import { DiaryCard } from "@ovok/native";
import * as React from "react";

const BasicDiaryCardNoDataExample = () => {
  return <DiaryCard.NoData />;
};

export default BasicDiaryCardNoDataExample;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/diary` API reference](/native-sdk/reference/diary).

## Localization [#localization]

The component uses the `"diary.no-data"` translation key. Ensure this key is defined in your translation files:

```json
{
  "diary": {
    "no-data": "No data recorded"
  }
}
```

### Theme Integration [#theme-integration]

- **Text Color**: Uses `theme.colors.onSurfaceDisabled` for muted appearance
- **Typography**: Custom font family `DMSans_700Bold` with 16px size
- **Responsive**: Adapts to system font size preferences

### Visual Design [#visual-design]

- **Muted Appearance**: Subtle styling to indicate absence of data
- **Consistent Typography**: Matches other secondary text in the app
- **Accessible Contrast**: Maintains readable contrast ratios

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.onSurfaceDisabled` - Text color for muted appearance

## Related Components [#related-components]

- [DiaryCard](/native-sdk/guide/components/diary/diary-card/) - Parent container component
- [DiaryCard.StartSection](/native-sdk/guide/components/diary/start-section/) - Header section component
- [Tile.MeasuredValue](/native-sdk/guide/components/tile/measured-value/) - Counterpart for measured data display