woocommerce/plugins/woocommerce-admin/docs/components/summary.md

SummaryList (component)

A container element for a list of SummaryNumbers. This component handles detecting & switching to the mobile format on smaller screens.

Props

children

• Required
• Type: ReactNode
• Default: null

A list of <SummaryNumber />s

label

• Type: String
• Default: null

An optional label of this group, read to screen reader users. Defaults to "Performance Indicators".

SummaryNumber (component)

A component to show a value, label, and an optional change percentage. Can also act as a link to a specific report focus.

Props

delta

• Type: Number
• Default: null

A number to represent the percentage change since the last comparison period - positive numbers will show a green up arrow, negative numbers will show a red down arrow, and zero will show a flat right arrow. If omitted, no change value will display.

href

• Type: String
• Default: '/analytics'

An internal link to the report focused on this number.

isOpen

• Type: Boolean
• Default: false

Boolean describing whether the menu list is open. Only applies in mobile view, and only applies to the toggle-able item (first in the list).

label

• Required
• Type: String
• Default: null

A string description of this value, ex "Revenue", or "New Customers"

onToggle

• Type: Function
• Default: null

A function used to switch the given SummaryNumber to a button, and called on click.

prevLabel

• Type: String
• Default: __( 'Previous Period:', 'wc-admin' )

A string description of the previous value's timeframe, ex "Previous Year:".

prevValue

• Type: One of type: number, string
• Default: null

A string or number value to display - a string is allowed so we can accept currency formatting. If omitted, this section won't display.

reverseTrend

• Type: Boolean
• Default: false

A boolean used to indicate that a negative delta is "good", and should be styled like a positive (and vice-versa).

selected

• Type: Boolean
• Default: false

A boolean used to show a highlight style on this number.

value

• Required
• Type: One of type: number, string
• Default: null

A string or number value to display - a string is allowed so we can accept currency formatting.

SummaryListPlaceholder (component)

SummaryListPlaceholder behaves like SummaryList but displays placeholder summary items instead of data. This can be used while loading data.

Props

numberOfItems

• Required
• Type: Number
• Default: null

An integer with the number of summary items to display.

numberOfRows

• Type: undefined
• Default: 5