DataLabel

Read-only period label (PERIOD: start - end) with timezone-aware dates.

import { DataLabel } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`startDate`	Optional	`Date \| null`	—	Range start; formatted in the active timezone (`dd/MM/yy`).
`endDate`	Optional	`Date \| null`	—	Range end; formatted in the active timezone (`dd/MM/yy`).
`label`	Optional	`string`	—	Label text; defaults to `PERIOD`.

Usage

Read-only period range label (PERIOD: start - end). Dates are formatted as dd/MM/yy in the timezone from useTimezone (@tetherto/mdk-react-adapter). Invalid or missing dates render as --/--/--.

Notes

Wrap your app in <MdkProvider> so the timezone store is available.
Styling uses the mdk-data-label BEM block; no size or color variants.
Use a dark toolbar background so default light text remains readable.

Example

/** * Runnable example for DataLabel. * * Wrap the app in `<MdkProvider>` so `useTimezone` can read the timezone store. */import { DataLabel } from '@tetherto/mdk-react-devkit'const start = new Date(2025, 0, 6)const end = new Date(2025, 2, 15)export const DataLabelExample = () => (  <div className="mdk-example-col">    <DataLabel startDate={start} endDate={end} />    <DataLabel startDate={null} endDate={null} />  </div>)