TagsList

Ce contenu n’est pas encore disponible dans votre langue.

The TagsList component renders a collection of tags with customizable layouts and sorting options.

Import

import { TagsList } from 'starlight-tags/components';

Props

Prop	Type	Default	Description
`tagIds`	`string[]`	-	Specific tag IDs to display
`tags`	`ProcessedTag[]`	-	Pre-fetched tag objects (for advanced use)
`limit`	`number`	-	Maximum number of tags to show
`title`	`string`	`undefined`	Optional heading above tags
`showCount`	`boolean`	`false`	Show page counts on badges
`layout`	`'inline' \| 'grid' \| 'list'`	`'inline'`	Layout style
`variant`	`'solid' \| 'outline' \| 'ghost'`	`'solid'`	Badge visual style
`sortBy`	`'name' \| 'count'`	`'name'`	Sort order

Basic Usage

Show all tags:

import { TagsList } from 'starlight-tags/components';

<TagsList />

That’s it! The component fetches all tags automatically.

Specific Tags

Display only specific tags by ID:

<TagsList tagIds={['authentication', 'rest-api', 'webhooks']} />

Limiting Results

Show only a certain number of tags:

<TagsList limit={6} />

Layouts

Inline (Default)

Tags flow horizontally and wrap:

<TagsList layout="inline" />

Grid

Tags in a responsive grid:

<TagsList layout="grid" />

List

Tags stacked vertically:

<TagsList layout="list" />

With Title

Add a heading above the tags:

<TagsList title="Related Topics" />

Sorting

By Name (Default)

Alphabetical order:

<TagsList sortBy="name" />

By Count

Most used tags first:

<TagsList sortBy="count" />

With Counts

Show how many pages use each tag:

<TagsList showCount />

Style Variants

<TagsList variant="solid" />
<TagsList variant="outline" />
<TagsList variant="ghost" />

Combined Options

<TagsList
  title="Popular Topics"
  layout="grid"
  sortBy="count"
  showCount
  variant="outline"
  limit={6}
/>

Grouped Examples

Status Tags

<TagsList
  tagIds={['stable', 'beta', 'deprecated']}
  title="API Status"
  variant="outline"
/>

SDK Options

<TagsList
  tagIds={['sdk-python', 'sdk-node', 'sdk-go']}
  title="Available SDKs"
  showCount
/>

Advanced: Pre-fetched Tags

For advanced filtering or custom data sources:

---
import { TagsList } from 'starlight-tags/components';

const { allTagsSorted } = Astro.locals.starlightTags;
// Custom filtering
const popularTags = allTagsSorted.filter(tag => tag.count >= 3);
---

<TagsList tags={popularTags} title="Popular Tags" />