| Name | Description | Default | Type |
|---|---|---|---|
primary* | Region for the primary information. | | NonNullable<ReactNode> |
actions | Region for adding Actions, Buttons, or Links. | | ReactNode |
as | HTML tag to render the SummaryItem's element with. | | ElementType |
container | Override the default Grid container props on SummaryItem. | | GridContainerProps |
overflowStrategy | Determines how the text within primary and secondary fields should handle overflow. | 'wrap' | 'ellipsis' |'wrap' |
ref | Ref for the SummaryItem. | | Ref<HTMLElement> |
secondary | Region for displaying supporting metadata. | | ReactNode |
testId | Applies a data-testid attribute to a component's root element and may be utilized as a prefix for descendant elements. Descendant element data-testid attributes are applied in a component to component specific manner. | | string |
visual | Region for an Avatar, Icon, or other supporting visual. | | ReactNode |
SummaryItem
core package4.0.1
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
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.
Usage
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.