SummaryItem

The SummaryItem component is a formatted layout ideal for displaying various levels of information, with visuals, metadata and actions. SummaryItems are used within the SummaryList component, but may also appear on their own.

For more information on how to use the features and props for this component, check out the developer documentation.

SummaryItems are composed of a visual region often used by Avatars, Images, or Icons, primary and secondary regions ideal for Text or MetaLists, and an actions region that can support Buttons or more typically MenuButtons. Only the primary region is required.

The regions for a SummaryItem are managed by the Grid component and position the primary region above the secondary region in the middle of the container with the visual and actions regions on either end. SummaryItems accept Grid container props to manipulate the positioning of the regions. If you are confined by space, the primary and secondary regions can respond to any overflow using the provided overflowStrategy, which is set to wrap by default.

NameTypeDefaultDescription
primary*NonNullable<ReactNode>Region for the primary information.
actionsReactNodeRegion for adding Actions, Buttons, or Links.
asElementTypeHTML tag to render the SummaryItem's element with.
containerGridContainerProps
overflowStrategy
'wrap' |'ellipsis' 
"wrap" Determines how the text within primary and secondary fields should handle overflow.
refRef<HTMLElement>Ref for the SummaryItem.
secondaryReactNodeRegion for displaying supporting metadata.
visualReactNodeRegion for an Avatar, Icon, or other supporting visual.