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
List

List

  • Design
  • Code
  • Props

List

Editable Example

import { List } from "@wfp/react";

() => {
  return <List />;
};

PropDefaultDescriptionValue

small

boolean
–

If true, renders the List with a smaller font size and padding.

colon

boolean
–

If true, colons will be displayed in the List items.

kind

"ordered" |"details" |"tooltip" |"unstyled" |"simple-inline" |"simple" |"unordered" |"bullets"
–

Specifies the visual presentation style of the List.

ListItem

Editable Example

import {} from "@wfp/react";

() => {
  return <ty />;
};

PropDefaultDescriptionValue

kind

"checkmark" |"cross"
–

Specify the kind of icon to use in the list item. Options are 'checkmark' or 'cross'. Also other unordered list style like circle, square or roman numerals for indented list and style preference This provides a visual cue about the nature or status of the list item.

small

boolean
–

Specify whether the list item should be a small variant. Useful for denser lists or when space is a constraint. @size

title

ReactNode
–

Content to be displayed as the title of the list item. This can be simple text or a React node for more complex content. @content

icon

ReactNode
–

Icon to be displayed in the list item. This can be a React node or a string representing the name of a pictogram. @content

On this page

  • List
  • ListItem

References

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