GridList

A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions.

Charizard

Blastoise

Venusaur

Pikachu

selectionMode

Example

GridList.tsx

GridList.css

theme.css

Example

GridList.tsx

GridList.css

theme.css

import {GridList, GridListItem} from './GridList';
import {Button} from './Button';

<GridList
  aria-label="Favorite pokemon"
  selectionMode="multiple">
  <GridListItem textValue="Charizard">
    Charizard
    <Button aria-label="Info">ⓘ</Button>
  </GridListItem>
  <GridListItem textValue="Blastoise">
    Blastoise
    <Button aria-label="Info">ⓘ</Button>
  </GridListItem>
  <GridListItem textValue="Venusaur">
    Venusaur
    <Button aria-label="Info">ⓘ</Button>
  </GridListItem>
  <GridListItem textValue="Pikachu">
    Pikachu
    <Button aria-label="Info">ⓘ</Button>
  </GridListItem>
</GridList>

GridList

Anatomy