ListView

An optional element to contain bulk actions, a 'Select all' checkbox, a density toggle for the view, etc.

Controls the width and height of the list and its contents

Callback for when the variant changes

Controls item's selection mode; bulk actions are allowed if true. Defaults to not selectable.

Controls if a drag handle is shown. Defaults to no drag handles.

What a single list item should be called. Used to customize assistive text about how many list items are selected. Defaults to 'list item'.

What many list items are called. Used to customize assistive text about how many list items are selected. Defaults to 'list items'.

Optional ID of an element that labels the list view. When provided, this takes the place of the default sr-only title.

Optional property that passes through to the strict prop in the useFocusZone hook in @primer/behaviors. When true, performs additional checks to determine tabbability which may adversely affect app performance. Defaults to true

Component type to render for drag and drop container

Include a toggle to switch between Comfortable and Condensed view modes.

Optional key for persisting to local storage the user's density selection. If omitted, the ListView's variant will revert to the default on page reload.

The prefix for use with unique id attributes for the list view and its subcomponents.

The rendered title of the list or information regarding its contents.

Links for applying any categorical, mutually exclusive section filters for the content of the ListView.

Used for assistive announcements that are reflective of the visual updates to the list container a sighted user will experience when using the list. Defaults to no announcement. Visually hidden, for screenreaders only.

Callback for when the checkbox for selecting and deselecting all list items is toggled.

Optional additional actions to show. Will not fall into an overflow dropdown menu to accommodate small screen widths.

Include a toggle to switch between Comfortable and Condensed view modes.

Indicate whether list items from multiple pages of ListView items can be selected by the user at a time. Used to determine when the 'Select all' checkbox should be rendered in an indeterminate state, to indicate when some but not all selectable items are selected. Defaults to false.

The name of this section filter, e.g., "Open" to describe a section filter that shows only open issues.

The number of list items in the category this section filter represents. Optional. Changes appearance when isLoading is true.

The URL to load the list with only items matching this section filter.

Optionally specify whether this section filter is currently active. Defaults to not being selected.

Optionally specify whether the section filter is still being loaded. Will be used to style the count, if given, when true.

The HTML element used for the visually hidden title. Should change depending on the information hierarchy of the page where the ListView is used. Defaults to an <h2> tag.

Override the icon used in the button that opens the action menu. Defaults to KebabHorizontalIcon.

Text that is shown as a visible Primer Label and as visually hidden text for screen readers.

The link that will be opened when the item is clicked

The Octicon component representing the desired icon

Render any child content as the leading visual NOTE: if both icon and children are passed, the icon will be rendered first, with the children appended after

Additional className prop to override or extend pre-existing className styles

The name of the Primer variable that will be used for the icon's fill eg.: done.fg

A text description of the item Used for visually hidden text to describe the item on focus for the screen readers

Indicates whether the rendered item has new content since lastViewed

A ListItem title communicates the overall purpose of the ListItem.

Optional extra elements to display on the right side of the list item. You can optionally wrap individual pieces of content in ListItem.Metadata for a consistent appearance.

Optional menu of additional actions to be shown on the right side of the ListItem. Use ListItem.ActionBar.

Component type to render for drag and drop container

Controls how the metadata will be aligned inside the trailing content. Defaults to 'left'.

Alter the appearance of the metadata to appear more subtle than other ListItem content ('secondary', default) or comparable to other ListItem content ('primary'). Affects text color, font size, width, and distance from other metadata items.

Additional elements to be rendered after the title header element and trailing badge.

A ref object to access the container element of the header.

A ref object to access the container element of the header.

An optional element used to indicate information such as the status of the item. Appears after the title text.

Additional elements to be rendered after the title header element and trailing badge.

A ref object to access the container element of the header.

A ref object to access the container element of the header.

An optional element used to indicate information such as the status of the item. Appears after the title text.

A ref object to access the container element of the header.

A ref object to access the container element of the header.

An optional element used to indicate information such as the status of the item. Appears after the title text.

A ref to the anchor element

An optional prop to pass additional props for the anchor tag of the title, if the title is a link Can be used to add a target or soft navigation, for example

The text content of the header, to convey the primary meaning of the list item.

Text that is shown as a visible Primer Label and as visually hidden text for screen readers.