Required
Objects list
The Objects list page template shows a list of unique items for when a customer needs to perform an action on the items.
<Box paddingX="space100" paddingTop="space130" paddingBottom="space160">
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb aria-label={useUID()}>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderHeading>Objects</PageHeaderHeading>
<PageHeaderActions>
<ButtonGroup>
<Button variant="secondary">Label</Button>
<Button variant="primary">Label</Button>
</ButtonGroup>
</PageHeaderActions>
<PageHeaderParagraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ex risus. Aenean at ante id lectus
faucibus hendrerit a fringilla lorem. Pellentesque faucibus sit amet dolor vitae lacinia.
</PageHeaderParagraph>
</PageHeaderDetails>
</PageHeader>
<Box>
<Box display="flex" flexDirection="column" rowGap="space50" marginBottom="space90">
<Box display="flex" columnGap="space80" alignItems="flex-end">
<Box minWidth="size30" maxWidth="size60" width="100%" display="flex" columnGap="space50">
<Box width="100%">
<Label htmlFor={criteria1}>Label</Label>
<Select id={criteria1}>1</Select>
</Box>
<Box width="100%">
<Label htmlFor={criteria2}>Label</Label>
<Select id={criteria2}>2</Select>
</Box>
<Box width="100%">
<Label htmlFor={criteria3}>Label</Label>
<Select id={criteria3}>3</Select>
</Box>
</Box>
<Box
height="100%"
display="flex"
width="size20"
justifyContent="flex-start"
alignItems="flex-end"
whiteSpace="nowrap"
>
<ButtonGroup>
<Button variant="primary">
<FilterIcon decorative />
Apply
</Button>
<Button variant="secondary">Clear all</Button>
</ButtonGroup>
</Box>
</Box>
<Separator orientation="horizontal" />
<Box display="flex" columnGap="space80" maxWidth="size110">
<Box maxWidth="size40">
<Input
type="text"
insertBefore={<SearchIcon decorative color="colorTextPrimary" />}
placeholder="Search"
aria-label={useUID()}
/>
</Box>
<Separator orientation="vertical" />
<Box>
<ButtonGroup>
<Button variant="secondary">
<DownloadIcon decorative />
Export
</Button>
<Button variant="secondary" size="icon">
<MoreIcon decorative={false} title="menu" />
</Button>
</ButtonGroup>
</Box>
</Box>
</Box>
<DataGrid aria-label="label1">
<DataGridHead>
<DataGridRow>
<DataGridHeader width="52px">
<Checkbox>
<ScreenReaderOnly>label</ScreenReaderOnly>
</Checkbox>
</DataGridHeader>
<DataGridHeader>
<Box display="flex" columnGap="space20">
Header
<UnsortedIcon decorative={false} title="sort column" />
</Box>
</DataGridHeader>
<DataGridHeader>
<Box display="flex" columnGap="space20">
Header
<UnsortedIcon decorative={false} title="sort column" />
</Box>
</DataGridHeader>
<DataGridHeader>
<Box display="flex" columnGap="space20">
Header
<UnsortedIcon decorative={false} title="sort column" />
</Box>
</DataGridHeader>
<DataGridHeader>
<Box display="flex" columnGap="space20" justifyContent="flex-end">
Header
<UnsortedIcon decorative={false} title="sort column" />
</Box>
</DataGridHeader>
</DataGridRow>
</DataGridHead>
<DataGridBody>
<DataGridRow>
<DataGridCell>
<Checkbox>
<ScreenReaderOnly>label</ScreenReaderOnly>
</Checkbox>
</DataGridCell>
<DataGridCell>
<Anchor href="#">Anchor</Anchor>
</DataGridCell>
<DataGridCell>Content</DataGridCell>
<DataGridCell>Content</DataGridCell>
<DataGridCell textAlign="right">Content</DataGridCell>
</DataGridRow>
<DataGridRow>
<DataGridCell>
<Checkbox>
<ScreenReaderOnly>label</ScreenReaderOnly>
</Checkbox>
</DataGridCell>
<DataGridCell>
<Anchor href="#">Anchor</Anchor>
</DataGridCell>
<DataGridCell>Content</DataGridCell>
<DataGridCell>Content</DataGridCell>
<DataGridCell textAlign="right">Content</DataGridCell>
</DataGridRow>
<DataGridRow>
<DataGridCell>
<Checkbox>
<ScreenReaderOnly>label</ScreenReaderOnly>
</Checkbox>
</DataGridCell>
<DataGridCell>
<Anchor href="#">Anchor</Anchor>
</DataGridCell>
<DataGridCell>Content</DataGridCell>
<DataGridCell>Content</DataGridCell>
<DataGridCell textAlign="right">Content</DataGridCell>
</DataGridRow>
</DataGridBody>
</DataGrid>
</Box>
</Box>An Objects list shows a list of unique items or records (objects), such as logs or contacts. The page can include search and filtering to help customers find an item they’re looking for, and bulk actions like export or delete.
Use an Objects list when a customer needs to:
- View objects of a single type
- Find specific objects quickly so they can view more object details, edit, or delete them
- Create a new object of this type
- Perform bulk actions on multiple objects
If the customer is primarily editing information, use the Settings page instead.
<Box paddingX="space100" paddingTop="space130" paddingBottom="space160">
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb aria-label={useUID()}>
<BreadcrumbItem href="#">Phone numbers</BreadcrumbItem>
<BreadcrumbItem href="#">Manage</BreadcrumbItem>
</Breadcrumb>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderHeading>Verified caller IDs</PageHeaderHeading>
<PageHeaderActions>
<Button variant="primary">Add caller ID</Button>
</PageHeaderActions>
<PageHeaderParagraph>
Use numbers you own as caller ID or the "To" number for outbound calls and messages. Phone numbers
you buy from Twilio or port to Twilio can always be used as caller IDs.
</PageHeaderParagraph>
</PageHeaderDetails>
</PageHeader>
<Box>
<Box maxWidth="size70" marginBottom="space90" display="flex" columnGap="space80" alignItems="flex-end">
<Box maxWidth="size90" display="flex" columnGap="space50">
<Box width="100%">
<Label htmlFor={input1}>Phone number</Label>
<Input type="text" id={input1} />
</Box>
<Box width="100%">
<Label htmlFor={input2}>Friendly name</Label>
<Input type="text" id={input2} />
</Box>
</Box>
<Box display="flex" width="size20" justifyContent="flex-start">
<ButtonGroup>
<Button variant="secondary">
<FilterIcon decorative />
Apply
</Button>
<Button variant="secondary">Clear</Button>
</ButtonGroup>
</Box>
</Box>
<DataGrid aria-label={useUID()}>
<DataGridHead>
<DataGridRow>
<DataGridHeader width="52px">
<Checkbox>
<ScreenReaderOnly>label</ScreenReaderOnly>
</Checkbox>
</DataGridHeader>
<DataGridHeader>
<Box display="flex" columnGap="space20">
Phone number
<UnsortedIcon decorative={false} title="sort column" />
</Box>
</DataGridHeader>
<DataGridHeader>
<Box display="flex" columnGap="space20">
Friendly name
<UnsortedIcon decorative={false} title="sort column" />
</Box>
</DataGridHeader>
<DataGridHeader>
<Box display="flex" columnGap="space20">
Actions
<UnsortedIcon decorative={false} title="sort column" />
</Box>
</DataGridHeader>
</DataGridRow>
</DataGridHead>
<DataGridBody>
<DataGridRow>
<DataGridCell>
<Checkbox>
<ScreenReaderOnly>label</ScreenReaderOnly>
</Checkbox>
</DataGridCell>
<DataGridCell>+1 512 809 4343</DataGridCell>
<DataGridCell>(512) 809-4343</DataGridCell>
<DataGridCell>
<Button variant="destructive_secondary" size="small">
Delete
</Button>
</DataGridCell>
</DataGridRow>
<DataGridRow>
<DataGridCell>
<Checkbox>
<ScreenReaderOnly>label</ScreenReaderOnly>
</Checkbox>
</DataGridCell>
<DataGridCell>+86 591 1093 1093</DataGridCell>
<DataGridCell>+86 591 1093 1093</DataGridCell>
<DataGridCell>
<Button variant="destructive_secondary" size="small">
Delete
</Button>
</DataGridCell>
</DataGridRow>
<DataGridRow>
<DataGridCell>
<Checkbox>
<ScreenReaderOnly>label</ScreenReaderOnly>
</Checkbox>
</DataGridCell>
<DataGridCell>+1 213 343 1345</DataGridCell>
<DataGridCell>(213) 343-1345</DataGridCell>
<DataGridCell>
<Button variant="destructive_secondary" size="small">
Delete
</Button>
</DataGridCell>
</DataGridRow>
</DataGridBody>
</DataGrid>
</Box>
</Box>At the top of the page, use the type of object as the page heading. Use the primary action in the header only for adding a new object. Optionally, use text under the heading to explain the primary use of the page.
The full header should be responsive to the width of the browser window. Heading and Paragraph should have a max width of $size-70.
The rest of the page follows the Filter Group pattern and uses a Data Grid. If there’s already a primary action in the page header, make the filter button a secondary button. If there are no interactive cells, use a Table instead of a Data Grid.
If the customer needs to examine each object in more detail, link each object to its Object details page.
The body should be responsive to the width of the browser window.
Coming soon
Add the “Paste Patterns & Templates” library to your file.