Skip to main content

List Page


A page that displays a list of items. Each item is a link to a new page where either detail or create view can be displayed.


Manage your auth settings and configure single sign-on.

Source code

import React from 'react';
import { Card, EmptySearchResult, FilterInput, Icon, LinkButton, Stack } from '@grafana/ui';
import { Data } from '@site/src/components/templates/GridPage/types';

interface ListPageProps {
data: Data;
query: string;
changeQuery: (query: string) => void;

export const ListPage = ({ data, query, changeQuery }: ListPageProps) => {
return (
<Stack direction={'column'} gap={2}>
<Stack gap={2}>
<FilterInput placeholder="Search by name" autoFocus={true} value={query} onChange={changeQuery} />
<LinkButton href="#" variant="primary">
Create item
{data.length ? ( => {
return (
<Card key={} href={'#'}>
<Icon name={item.icon} size={'xxxl'} />
) : (
<EmptySearchResult>No results matching your query</EmptySearchResult>

export default ListPage;


  • Use a combination of the Stack component with the column direction and Card components to create a list layout.
  • Use the Card component to create a list item.
  • For showing the empty state, use the EmptySearchResult component.
  • If filters are present, the primary action should be located after the filters, on the right side of the page.

Visual guidelines

Figma designs