BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Actions
      • Overview
      • Button
      • ContextMenu
      • Link
    • Controls
      • Overview
      • Checkbox
      • Tag
      • Toggle
    • Forms
      • Overview
      • DatePicker
      • FileUploader
      • Input
      • NumberInput
      • RadioButton
      • Search
      • Select
      • Slider
      • TextArea
      • TextInput
    • Hooks
      • useIsomorphicLayoutEffect
      • useMediaQuery
      • useSettings
    • Navigation
      • Overview
      • AnchorNavigation
      • BannerNavigation
      • Breadcrumb
      • Footer
      • InfoBar
      • MainNavigation
      • SecondaryNavigation
      • StepNavigation
      • SubNavigation
    • Overlay
      • Overview
      • Credits
      • Modal
      • ModalWrapper
      • Notification
      • Tooltip
    • Structure
      • Overview
      • Accordion
      • AuthLayout
      • Avatar
      • Callout
      • Card
      • ContentSwitcher
      • Empty
      • Hero
      • InlineLoading
      • Item
      • List
      • Loading
      • mdxComponents
      • Module
      • Pagination
      • ReadMore
      • Story
      • Table
      • Tabs
      • Text
      • Unit
      • User
      • WFPCoreProvider
      • Wrapper
Components
Structure
Draft documentation

Unit

  • Design
  • Code
  • Props

The Unit component method returns a component with a language and unit sensitive representation of this number based on Numbers and Unit from the Editorial Guidelines the Numbers and Units Reference on developer.mozilla.org.

Note

Design documentation on Unit component is under development.


How to use

When to use

  • Multinational Audience: Use the Unit component when your application needs to support multiple languages and measurement systems, automatically adapting to user settings.
  • Data Presentation: When presenting data involving units, such as financial figures, distances, weights, and temperatures, where precise understanding is critical.
  • User Input Fields: For input scenarios where users either enter or receive data that involve units and calls for accurate conversions and displays.

When not to use

  • Non-standard Units: In cases where the units are unconventional or require custom handling outside of typical language localization libraries, custom solutions may be preferable.

On this page

  • How to use

References

  • Storybook
Storybook
Figma library
Contact us
2025 © World Food Programme