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

User

  • Design
  • Code
  • Props
Design

The User is used inside the MainNavigation and can display an avatar and username. It can be also used inside forms, etc. with the extended prop.

When to use

  • Use the User component to represent individual users, especially in contexts like navigation bars, user profiles, or forms.
  • Utilize the image prop for adding user avatars, enhancing visual recognition.
  • Apply the name prop to display the user’s name, ensuring it is clearly visible next to the avatar.
  • Use ellipsis prop for names that might be too long.
  • Employ description and extendedDescription props for additional user information, providing context and details about the user.

When not to use

  • Do not use the User component for non-user-related entities. It is specifically designed for representing individual users.
  • Avoid overcrowding the component with too much text or overly detailed descriptions. Keep it concise and relevant.

Anatomy

Figma image

Properties

Figma image

Actions 🎬

When including user information, balance the display of textual information with visual elements. Use the ellipsis, description, and extendedDescription props thoughtfully to ensure the component remains informative yet uncluttered.

Related

  • Avatar

On this page

  • Anatomy
  • Properties
  • Actions 🎬
  • Related

References

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