• Public
  • Public/Protected
  • All

Module @react-md/list


Type aliases

ListElement: HTMLUListElement | HTMLOListElement
ListItemAddonPosition: "top" | "middle" | "bottom"
ListItemAddonType: "icon" | "avatar" | "media" | "large-media"
ListItemHeight: "auto" | "normal" | "medium" | "large" | "extra-large"


List: ForwardRefExoticComponent<ListProps & RefAttributes<ListElement>> = ...

The List component creates an unstyled ordered or unordered list that should be used with the ListItem, ListItemLink, and SimpleListItem components.

ListItem: ForwardRefExoticComponent<ListItemProps & RefAttributes<HTMLLIElement>> = ...

The ListItem creates a clickable and focusable <li> within a List that can optionally render addons to the left and right of the children or text.

ListItemLink: ForwardRefExoticComponent<(ListItemLinkProps & RefAttributes<HTMLAnchorElement | ElementType<any>>) & (Pick<ListItemLinkWithComponentProps, keyof ListItemLinkWithComponentProps> & RefAttributes<HTMLAnchorElement | ElementType<any>>)> = ...

This component is a really bad attempt at creating a Link within a List that has the main ListItem styles. It will probably be better to just use the ListItemChildren within your Link component instead.

ListSubheader: ForwardRefExoticComponent<ListSubheaderProps & RefAttributes<HTMLLIElement>> = ...

This is a simple component that will render a <li> with the subheader typography styles. It also supports an inset variant that adds some spacing to the left of the text to align with other ListItem that have left addons.

SimpleListItem: ForwardRefExoticComponent<SimpleListItemProps & RefAttributes<HTMLLIElement>> = ...

The SimpleListItem component is used to create a non-clickable item within a List. This is really just useful since it allows for the ListItem styling behavior of left and right icons, avatars, and media.

Note: Even though this component exists, it is recommended to use the ListItemChildren component instead if you want the "addon" styling/behavior since screen readers read li items within lists differently.


  • The ListItemChildren component is used to create a styled list item that can have optional addons to the left or right of the children in the form of icons, avatars, or media. The children can be replaced by the primaryText and secondaryText props to create stacked text spanning two or more lines with the default behavior of using line-clamp at three lines.

    Note: This will return a React.Fragment of the children and does not wrap in a DOM node for styling. The parent component should normally have display: flex for the styling to work.


    Returns ReactElement

  • Gets the expected height for the ListItem or SimpleListItem based on the addons and secondaryText props.


    • height !== "auto" -> height
    • secondaryText or left/right addon is media/media-large -> "extra-large"
    • left/right addon is avatar -> "large"
    • left/right addon is icon -> "medium"
    • no addons and no secondary text -> "normal"


    Returns ListItemHeight

Generated using TypeDoc