Components / Formatting / Distance

Main navigation
Intro
OverviewGetting StartedConfiguration
Design Language
ValuesPrinciplesColorsTypographyIconsIllustrations
Guides
StylingThemingLayoutForms
Components
Core
ClickElIconButtonLabelText
Layout
BoxGridSpacer
Actions
ActionButtonActionLinkFloatingActionButton
Forms
CheckboxCheckboxCardFileInputNumberInputRadioRadioCardRadioGroupSelectInputSliderSmallCardSortingSelectorTextAreaTextInput
Disclosure
AccordionCarouselModalOverlayVisuallyHidden
Data Display
BadgeCardInfoMessageTag
Feedback
LoadingLoadingBar
Media
LogoIconsIllustrations
Formatting
CurrencyDateTimeDistance
Hooks
useBreakpointuseFielduseFormuseScrollBlockingOverlayuseStorageuseClickAway
Utilities
formatCurrencyformatDateTimeformatDistance
Components / Formatting / Distance
DistanceDistance should be used whenever a distance is rendered.
PropsName
Type
Default
Description
children*
number, string
The value that should be formatted
locale
sv-SE
sv-SE
The locale used to format
unit
mil

|  km
mil
The currency used to format
Examples
Dark Mode
Open in Playroom
<Box space={2}>
  <Distance>40</Distance>
  <Distance>400.50</Distance>
  <Distance>4500.50</Distance>
</Box><Box space={2}>
  <Distance>40</Distance>
  <Distance>400.50</Distance>
  <Distance>4500.50</Distance>
</Box>
Units
Dark Mode
Open in Playroom
<Box space={2}>
  <Distance unit="km">40</Distance>
  <Distance unit="km">400.50</Distance>
  <Distance unit="km">4500.50</Distance>
</Box><Box space={2}>
  <Distance unit="km">40</Distance>
  <Distance unit="km">400.50</Distance>
  <Distance unit="km">4500.50</Distance>
</Box>
Nested Text
Dark Mode
Open in Playroom
<Text variant="ash">
  <Distance>4500.50</Distance>
</Text><Text variant="ash">
  <Distance>4500.50</Distance>
</Text>
Table of Contents
Props
Examples
Units
Nested Text

Name	Type	Default	Description
children*	number, string		The value that should be formatted
locale	sv-SE	sv-SE	The locale used to format
unit	mil \| km	mil	The currency used to format