diff --git a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
index 8bc48ded4f45..8fa7ba7139ee 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
@@ -50,7 +50,7 @@ export const ClosedWithSelection: Story = {
   },
 };
 
-export const Open = {
+export const Clear = {
   ...Closed,
   play: async ({ canvasElement }) => {
     const button = await findByRole(canvasElement, 'button');
@@ -58,15 +58,15 @@ export const Open = {
   },
 } satisfies Story;
 
-export const OpenWithSelection = {
+export const WithSelection = {
   ...ClosedWithSelection,
-  play: Open.play,
+  play: Clear.play,
 } satisfies Story;
 
-export const OpenWithSelectionInverted = {
-  ...Open,
+export const WithSelectionInverted = {
+  ...Clear,
   args: {
-    ...Open.args,
+    ...Clear.args,
     tagPresets: {
       A: { defaultFilterSelection: 'exclude' },
       B: { defaultFilterSelection: 'exclude' },
@@ -74,10 +74,10 @@ export const OpenWithSelectionInverted = {
   },
 } satisfies Story;
 
-export const OpenWithSelectionMixed = {
-  ...Open,
+export const WithSelectionMixed = {
+  ...Clear,
   args: {
-    ...Open.args,
+    ...Clear.args,
     tagPresets: {
       A: { defaultFilterSelection: 'include' },
       B: { defaultFilterSelection: 'exclude' },
@@ -85,19 +85,20 @@ export const OpenWithSelectionMixed = {
   },
 } satisfies Story;
 
-export const OpenEmpty: Story = {
+export const Empty: Story = {
   args: {
     indexJson: {
       v: 6,
       entries: {},
     },
   },
-  play: Open.play,
+  play: Clear.play,
 };
 
 export const EmptyProduction: Story = {
   args: {
-    ...OpenEmpty.args,
+    ...Empty.args,
     isDevelopment: false,
   },
+  play: Clear.play,
 };
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index 5b2bacd38ec7..16694d57f876 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -1,17 +1,32 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Badge, IconButton, WithTooltip } from 'storybook/internal/components';
-import type { StoryIndex, Tag, TagsOptions } from 'storybook/internal/types';
+import type {
+  API_PreparedIndexEntry,
+  StoryIndex,
+  Tag,
+  TagsOptions,
+} from 'storybook/internal/types';
 
-import { FilterIcon } from '@storybook/icons';
+import { BeakerIcon, DocumentIcon, FilterIcon, PlayHollowIcon } from '@storybook/icons';
 
 import type { API } from 'storybook/manager-api';
-import { styled } from 'storybook/theming';
+import { color, styled } from 'storybook/theming';
 
-import { HIDDEN_TAGS, TagsFilterPanel } from './TagsFilterPanel';
+import { type Filter, type FilterFunction, TagsFilterPanel, groupByType } from './TagsFilterPanel';
 
 const TAGS_FILTER = 'tags-filter';
 
+const BUILT_IN_TAGS = new Set([
+  'dev',
+  'test',
+  'autodocs',
+  'attached-mdx',
+  'unattached-mdx',
+  'play-fn',
+  'test-fn',
+]);
+
 const Wrapper = styled.div({
   position: 'relative',
 });
@@ -42,15 +57,64 @@ export interface TagsFilterProps {
 }
 
 export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFilterProps) => {
-  const allTags = useMemo(() => {
-    return Object.values(indexJson.entries).reduce((acc, entry) => {
+  const filtersById = useMemo<{ [id: string]: Filter }>(() => {
+    const userTagsCounts = Object.values(indexJson.entries).reduce((acc, entry) => {
       entry.tags?.forEach((tag: Tag) => {
-        if (!HIDDEN_TAGS.has(tag)) {
+        if (!BUILT_IN_TAGS.has(tag)) {
           acc.set(tag, (acc.get(tag) || 0) + 1);
         }
       });
       return acc;
     }, new Map<Tag, number>());
+
+    const userFilters = Object.fromEntries(
+      userTagsCounts.entries().map(([tag, count]) => {
+        const filterFn = (entry: API_PreparedIndexEntry, excluded?: boolean) =>
+          excluded ? !entry.tags?.includes(tag) : !!entry.tags?.includes(tag);
+        return [tag, { id: tag, type: 'tag', title: tag, count, filterFn }];
+      })
+    );
+
+    const withCount = (filterFn: FilterFunction) => ({
+      count: Object.values(indexJson.entries).filter((entry) => filterFn(entry)).length,
+      filterFn,
+    });
+
+    const builtInFilters = {
+      _docs: {
+        id: '_docs',
+        type: 'built-in',
+        title: 'Documentation',
+        icon: <DocumentIcon color={color.gold} />,
+        ...withCount((entry: API_PreparedIndexEntry, excluded?: boolean) =>
+          excluded ? entry.type !== 'docs' : entry.type === 'docs'
+        ),
+      },
+      _play: {
+        id: '_play',
+        type: 'built-in',
+        title: 'Play',
+        icon: <PlayHollowIcon color={color.seafoam} />,
+        ...withCount((entry: API_PreparedIndexEntry, excluded?: boolean) =>
+          excluded
+            ? entry.type !== 'story' || !entry.tags?.includes('play-fn')
+            : entry.type === 'story' && !!entry.tags?.includes('play-fn')
+        ),
+      },
+      _test: {
+        id: '_test',
+        type: 'built-in',
+        title: 'Testing',
+        icon: <BeakerIcon color={color.green} />,
+        ...withCount((entry: API_PreparedIndexEntry, excluded?: boolean) =>
+          excluded
+            ? entry.type !== 'story' || entry.subtype !== 'test'
+            : entry.type === 'story' && entry.subtype === 'test'
+        ),
+      },
+    };
+
+    return { ...userFilters, ...builtInFilters };
   }, [indexJson.entries]);
 
   const { defaultIncluded, defaultExcluded } = useMemo(() => {
@@ -63,64 +127,70 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
         }
         return acc;
       },
-      { defaultIncluded: new Set<Tag>(), defaultExcluded: new Set<Tag>() }
+      { defaultIncluded: new Set<string>(), defaultExcluded: new Set<string>() }
     );
   }, [tagPresets]);
 
-  const [includedTags, setIncludedTags] = useState<Set<Tag>>(new Set(defaultIncluded));
-  const [excludedTags, setExcludedTags] = useState<Set<Tag>>(new Set(defaultExcluded));
+  const [includedFilters, setIncludedFilters] = useState(new Set(defaultIncluded));
+  const [excludedFilters, setExcludedFilters] = useState(new Set(defaultExcluded));
   const [expanded, setExpanded] = useState(false);
-  const tagsActive = includedTags.size > 0 || excludedTags.size > 0;
+  const tagsActive = includedFilters.size > 0 || excludedFilters.size > 0;
 
-  const resetTags = useCallback(() => {
-    setIncludedTags(new Set(defaultIncluded));
-    setExcludedTags(new Set(defaultExcluded));
+  const resetFilters = useCallback(() => {
+    setIncludedFilters(new Set(defaultIncluded));
+    setExcludedFilters(new Set(defaultExcluded));
   }, [defaultIncluded, defaultExcluded]);
 
-  useEffect(resetTags, [resetTags]);
+  useEffect(resetFilters, [resetFilters]);
 
   useEffect(() => {
     api.experimental_setFilter(TAGS_FILTER, (item) => {
-      if (!includedTags.size && !excludedTags.size) {
-        return true;
-      }
+      const included = Object.values(
+        groupByType(Array.from(includedFilters).map((id) => filtersById[id]))
+      );
+      const excluded = Object.values(
+        groupByType(Array.from(excludedFilters).map((id) => filtersById[id]))
+      );
+
       return (
-        (!includedTags.size || includedTags.values().some((tag) => item.tags?.includes(tag))) &&
-        (!excludedTags.size || excludedTags.values().every((tag) => !item.tags?.includes(tag)))
+        (!included.length ||
+          included.every((group) => group.some(({ filterFn }) => filterFn(item, false)))) &&
+        (!excluded.length ||
+          excluded.every((group) => group.every(({ filterFn }) => filterFn(item, true))))
       );
     });
-  }, [api, includedTags, excludedTags]);
+  }, [api, includedFilters, excludedFilters, filtersById]);
 
-  const toggleTag = useCallback(
-    (tag: string, excluded?: boolean) => {
-      const set = new Set([tag]);
+  const toggleFilter = useCallback(
+    (id: string, selected: boolean, excluded?: boolean) => {
+      const set = new Set([id]);
       if (excluded === true) {
-        setExcludedTags(excludedTags.union(set));
-        setIncludedTags(includedTags.difference(set));
+        setExcludedFilters(excludedFilters.union(set));
+        setIncludedFilters(includedFilters.difference(set));
       } else if (excluded === false) {
-        setIncludedTags(includedTags.union(set));
-        setExcludedTags(excludedTags.difference(set));
-      } else if (includedTags.has(tag)) {
-        setIncludedTags(includedTags.difference(set));
-      } else if (excludedTags.has(tag)) {
-        setExcludedTags(excludedTags.difference(set));
+        setIncludedFilters(includedFilters.union(set));
+        setExcludedFilters(excludedFilters.difference(set));
+      } else if (selected) {
+        setIncludedFilters(includedFilters.union(set));
+        setExcludedFilters(excludedFilters.difference(set));
       } else {
-        setIncludedTags(includedTags.union(set));
+        setIncludedFilters(includedFilters.difference(set));
+        setExcludedFilters(excludedFilters.difference(set));
       }
     },
-    [includedTags, excludedTags]
+    [includedFilters, excludedFilters]
   );
 
-  const setAllTags = useCallback(
+  const setAllFilters = useCallback(
     (selected: boolean) => {
       if (selected) {
-        setIncludedTags(new Set(allTags.keys()));
+        setIncludedFilters(new Set(Object.keys(filtersById)));
       } else {
-        setIncludedTags(new Set());
+        setIncludedFilters(new Set());
       }
-      setExcludedTags(new Set());
+      setExcludedFilters(new Set());
     },
-    [allTags]
+    [filtersById]
   );
 
   const handleToggleExpand = useCallback(
@@ -132,7 +202,7 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
   );
 
   // Hide the entire UI if there are no tags and it's a built Storybook
-  if (allTags.size === 0 && !isDevelopment) {
+  if (Object.keys(filtersById).length === 0 && !isDevelopment) {
     return null;
   }
 
@@ -146,16 +216,16 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
       tooltip={() => (
         <TagsFilterPanel
           api={api}
-          allTags={allTags}
-          includedTags={includedTags}
-          excludedTags={excludedTags}
-          toggleTag={toggleTag}
-          setAllTags={setAllTags}
-          resetTags={resetTags}
+          filtersById={filtersById}
+          includedFilters={includedFilters}
+          excludedFilters={excludedFilters}
+          toggleFilter={toggleFilter}
+          setAllFilters={setAllFilters}
+          resetFilters={resetFilters}
           isDevelopment={isDevelopment}
           isDefaultSelection={
-            includedTags.symmetricDifference(defaultIncluded).size === 0 &&
-            excludedTags.symmetricDifference(defaultExcluded).size === 0
+            includedFilters.symmetricDifference(defaultIncluded).size === 0 &&
+            excludedFilters.symmetricDifference(defaultExcluded).size === 0
           }
           hasDefaultSelection={defaultIncluded.size > 0 || defaultExcluded.size > 0}
         />
@@ -166,7 +236,7 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
         <IconButton key="tags" title="Tag filters" active={tagsActive} onClick={handleToggleExpand}>
           <FilterIcon />
         </IconButton>
-        {includedTags.size + excludedTags.size > 0 && <TagSelected />}
+        {includedFilters.size + excludedFilters.size > 0 && <TagSelected />}
       </Wrapper>
     </WithTooltip>
   );
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
index fc7d7481bb64..ee4847fe22f2 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
@@ -1,25 +1,72 @@
+import { BeakerIcon, DocumentIcon, PlayHollowIcon } from '@storybook/icons';
+
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { fn } from 'storybook/test';
+import { color } from 'storybook/theming';
 
 import { TagsFilterPanel } from './TagsFilterPanel';
 
+const builtInFilters = {
+  _docs: {
+    id: '_docs',
+    type: 'built-in',
+    title: 'Documentation',
+    icon: <DocumentIcon color={color.gold} />,
+    count: 8,
+    filterFn: fn(),
+  },
+  _play: {
+    id: '_play',
+    type: 'built-in',
+    title: 'Play',
+    icon: <PlayHollowIcon color={color.seafoam} />,
+    count: 21,
+    filterFn: fn(),
+  },
+  _test: {
+    id: '_test',
+    type: 'built-in',
+    title: 'Testing',
+    icon: <BeakerIcon color={color.green} />,
+    count: 42,
+    filterFn: fn(),
+  },
+};
+
 const meta = {
   component: TagsFilterPanel,
   title: 'Sidebar/TagsFilterPanel',
   args: {
-    toggleTag: fn(),
-    setAllTags: fn(),
-    allTags: new Map([
-      ['play-fn', 1],
-      ['test-fn', 1],
-      ['tag1', 1],
-      ['tag2', 1],
-      ['tag3-which-is-very-long-and-will-be-truncated-after-a-while', 1],
-    ]),
-    includedTags: new Set(),
-    excludedTags: new Set(),
-    resetTags: fn(),
+    toggleFilter: fn(),
+    setAllFilters: fn(),
+    filtersById: {
+      tag1: {
+        id: 'tag1',
+        type: 'tag',
+        title: 'Tag1',
+        count: 11,
+        filterFn: fn(),
+      },
+      tag2: {
+        id: 'tag2',
+        type: 'tag',
+        title: 'Tag2',
+        count: 24,
+        filterFn: fn(),
+      },
+      'tag3-which-is-very-long-and-will-be-truncated-after-a-while': {
+        id: 'tag3-which-is-very-long-and-will-be-truncated-after-a-while',
+        type: 'tag',
+        title: 'Tag3',
+        count: 2,
+        filterFn: fn(),
+      },
+      ...builtInFilters,
+    },
+    includedFilters: new Set(),
+    excludedFilters: new Set(),
+    resetFilters: fn(),
     isDefaultSelection: true,
     hasDefaultSelection: false,
     api: {
@@ -36,46 +83,37 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {};
 
-export const Empty: Story = {
-  args: {
-    allTags: new Map(),
-  },
-};
-
-export const BuiltInTagsOnly: Story = {
+export const BuiltInOnly: Story = {
   args: {
-    allTags: new Map([
-      ['play-fn', 1],
-      ['test-fn', 1],
-    ]),
+    filtersById: builtInFilters,
   },
 };
 
-export const BuiltInTagsOnlyProduction: Story = {
+export const BuiltInOnlyProduction: Story = {
   args: {
-    ...BuiltInTagsOnly.args,
+    ...BuiltInOnly.args,
     isDevelopment: false,
   },
 };
 
 export const Included: Story = {
   args: {
-    includedTags: new Set(['tag1', 'play-fn']),
+    includedFilters: new Set(['tag1', '_play']),
     isDefaultSelection: false,
   },
 };
 
 export const Excluded: Story = {
   args: {
-    excludedTags: new Set(['tag1', 'play-fn']),
+    excludedFilters: new Set(['tag1', '_play']),
     isDefaultSelection: false,
   },
 };
 
 export const Mixed: Story = {
   args: {
-    includedTags: new Set(['tag1', 'play-fn']),
-    excludedTags: new Set(['tag2', 'test-fn']),
+    includedFilters: new Set(['tag1', '_play']),
+    excludedFilters: new Set(['tag2', '_test']),
     isDefaultSelection: false,
   },
 };
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
index 3dc6789672d0..369480f4d250 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
@@ -9,34 +9,31 @@ import {
   TooltipNote,
   WithTooltip,
 } from 'storybook/internal/components';
-import type { Tag } from 'storybook/internal/types';
+import type { API_PreparedIndexEntry } from 'storybook/internal/types';
 
 import {
   BatchAcceptIcon,
-  BeakerIcon,
   DeleteIcon,
   DocumentIcon,
-  PlayHollowIcon,
   ShareAltIcon,
   SweepIcon,
   UndoIcon,
 } from '@storybook/icons';
 
 import type { API } from 'storybook/manager-api';
-import { color, styled } from 'storybook/theming';
+import { styled } from 'storybook/theming';
 
 import type { Link } from '../../../components/components/tooltip/TooltipLinkList';
 
-export const HIDDEN_TAGS = new Set(['dev', 'test']);
-
-export const BUILT_IN_TAGS = new Set([
-  ...HIDDEN_TAGS,
-  'autodocs',
-  'attached-mdx',
-  'unattached-mdx',
-  'play-fn',
-  'test-fn',
-]);
+export const groupByType = (filters: Filter[]) =>
+  filters.reduce(
+    (acc, filter) => {
+      acc[filter.type] = acc[filter.type] || [];
+      acc[filter.type].push(filter);
+      return acc;
+    },
+    {} as Record<string, Filter[]>
+  );
 
 const Wrapper = styled.div({
   minWidth: 240,
@@ -85,14 +82,23 @@ const MutedText = styled.span(({ theme }) => ({
   color: theme.textMutedColor,
 }));
 
+export type FilterFunction = (entry: API_PreparedIndexEntry, excluded?: boolean) => boolean;
+export type Filter = {
+  id: string;
+  type: string;
+  title: string;
+  count: number;
+  filterFn: FilterFunction;
+};
+
 interface TagsFilterPanelProps {
   api: API;
-  allTags: Map<Tag, number>;
-  includedTags: Set<Tag>;
-  excludedTags: Set<Tag>;
-  toggleTag: (tag: Tag, excluded?: boolean) => void;
-  setAllTags: (selected: boolean) => void;
-  resetTags: () => void;
+  filtersById: { [id: string]: Filter };
+  includedFilters: Set<string>;
+  excludedFilters: Set<string>;
+  toggleFilter: (key: string, selected: boolean, excluded?: boolean) => void;
+  setAllFilters: (selected: boolean) => void;
+  resetFilters: () => void;
   isDevelopment: boolean;
   isDefaultSelection: boolean;
   hasDefaultSelection: boolean;
@@ -100,62 +106,47 @@ interface TagsFilterPanelProps {
 
 export const TagsFilterPanel = ({
   api,
-  allTags,
-  includedTags,
-  excludedTags,
-  toggleTag,
-  setAllTags,
-  resetTags,
+  filtersById,
+  includedFilters,
+  excludedFilters,
+  toggleFilter,
+  setAllFilters,
+  resetFilters,
   isDevelopment,
   isDefaultSelection,
   hasDefaultSelection,
 }: TagsFilterPanelProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
-  const userEntries = Array.from(allTags.entries())
-    .filter(([tag]) => !BUILT_IN_TAGS.has(tag))
-    .sort((a, b) => a[0].localeCompare(b[0]))
-    .map(([tag, count]) => ({
-      title: tag,
-      count,
-      onToggle: (excluded?: boolean) => toggleTag(tag, excluded),
-      isIncluded: includedTags.has(tag),
-      isExcluded: excludedTags.has(tag),
-    }));
-
-  const docsUrl = api.getDocsUrl({ subpath: 'writing-stories/tags#filtering-by-custom-tags' });
-
-  const noTags = {
-    id: 'no-tags',
-    title: 'There are no tags. Use tags to organize and filter your Storybook.',
-    isIndented: false,
-  };
-
-  const renderTag = ({
-    icon,
+  const renderLink = ({
+    id,
+    type,
     title,
+    icon,
     count,
-    onToggle,
-    isIncluded,
-    isExcluded,
   }: {
-    icon?: React.ReactNode;
+    id: string;
+    type: string;
     title: string;
+    icon?: React.ReactNode;
     count: number;
-    onToggle: (excluded?: boolean) => void;
-    isIncluded: boolean;
-    isExcluded: boolean;
-  }) => {
+  }): Link => {
+    const onToggle = (selected: boolean, excluded?: boolean) =>
+      toggleFilter(id, selected, excluded);
+    const isIncluded = includedFilters.has(id);
+    const isExcluded = excludedFilters.has(id);
     const isChecked = isIncluded || isExcluded;
+    const toggleTagLabel = `${isChecked ? 'Remove' : 'Add'} ${type} filter: ${title}`;
+    const invertButtonLabel = `${isExcluded ? 'Include' : 'Exclude'} ${type}: ${title}`;
     return {
-      id: `tag-${title}`,
+      id: `filter-${type}-${id}`,
       content: (
         <TagRow>
           <WithTooltip
             delayShow={1000}
             hasChrome={false}
             style={{ minWidth: 0, flex: 1 }}
-            tooltip={<TooltipNote note={`${isChecked ? 'Remove' : 'Add'} tag filter: ${title}`} />}
+            tooltip={<TooltipNote note={toggleTagLabel} />}
             trigger="hover"
           >
             <ListItem
@@ -163,9 +154,14 @@ export const TagsFilterPanel = ({
               icon={
                 <>
                   {isExcluded ? <DeleteIcon /> : isIncluded ? null : icon}
-                  <Form.Checkbox checked={isChecked} onChange={() => onToggle()} data-tag={title} />
+                  <Form.Checkbox
+                    checked={isChecked}
+                    onChange={() => onToggle(!isChecked)}
+                    data-tag={title}
+                  />
                 </>
               }
+              aria-label={toggleTagLabel}
               title={
                 <Label>
                   {title}
@@ -178,10 +174,15 @@ export const TagsFilterPanel = ({
           <WithTooltip
             delayShow={1000}
             hasChrome={false}
-            tooltip={<TooltipNote note={`${isExcluded ? 'Include' : 'Exclude'} tag: ${title}`} />}
+            tooltip={<TooltipNote note={invertButtonLabel} />}
             trigger="hover"
           >
-            <Button variant="ghost" size="medium" onClick={() => onToggle(!isExcluded)}>
+            <Button
+              variant="ghost"
+              size="medium"
+              onClick={() => onToggle(true, !isExcluded)}
+              aria-label={invertButtonLabel}
+            >
               {isExcluded ? 'Include' : 'Exclude'}
             </Button>
           </WithTooltip>
@@ -190,75 +191,49 @@ export const TagsFilterPanel = ({
     };
   };
 
-  const groups = [
-    allTags.size === 0 ? [noTags] : [],
-    userEntries.map(renderTag),
-    [
-      renderTag({
-        icon: <DocumentIcon color={color.gold} />,
-        title: 'Documentation',
-        count:
-          (allTags.get('autodocs') || 0) +
-            (allTags.get('attached-mdx') || 0) +
-            (allTags.get('unattached-mdx') || 0) || 0,
-        onToggle: (excluded?: boolean) => {
-          toggleTag('autodocs', excluded);
-          toggleTag('attached-mdx', excluded);
-          toggleTag('unattached-mdx', excluded);
-        },
-        isIncluded:
-          includedTags.has('autodocs') ||
-          includedTags.has('attached-mdx') ||
-          includedTags.has('unattached-mdx'),
-        isExcluded:
-          excludedTags.has('autodocs') ||
-          excludedTags.has('attached-mdx') ||
-          excludedTags.has('unattached-mdx'),
-      }),
-      renderTag({
-        icon: <PlayHollowIcon color={color.seafoam} />,
-        title: 'Play',
-        count: allTags.get('play-fn') || 0,
-        onToggle: (excluded?: boolean) => toggleTag('play-fn', excluded),
-        isIncluded: includedTags.has('play-fn'),
-        isExcluded: excludedTags.has('play-fn'),
-      }),
-      renderTag({
-        icon: <BeakerIcon color={color.green} />,
-        title: 'Testing',
-        count: allTags.get('test-fn') || 0,
-        onToggle: (excluded?: boolean) => toggleTag('test-fn', excluded),
-        isIncluded: includedTags.has('test-fn'),
-        isExcluded: excludedTags.has('test-fn'),
-      }),
-    ],
-  ] as Link[][];
+  const groups = groupByType(Object.values(filtersById));
+  const links: Link[][] = Object.values(groups).map((group) =>
+    group.sort((a, b) => a.id.localeCompare(b.id)).map((filter) => renderLink(filter))
+  );
 
-  if (userEntries.length === 0 && isDevelopment) {
-    groups.push([
+  if (!groups.tag?.length && isDevelopment) {
+    links.push([
       {
         id: 'tags-docs',
         title: 'Learn how to add tags',
         icon: <DocumentIcon />,
         right: <ShareAltIcon />,
-        href: docsUrl,
+        href: api.getDocsUrl({ subpath: 'writing-stories/tags#filtering-by-custom-tags' }),
       },
     ]);
   }
 
+  const filtersLabel =
+    includedFilters.size === 0 && excludedFilters.size === 0 ? 'Select all' : 'Clear filters';
+
   return (
     <Wrapper ref={ref}>
-      {allTags.size > 0 && (
+      {Object.keys(filtersById).length > 0 && (
         <Actions>
-          {includedTags.size === 0 && excludedTags.size === 0 ? (
-            <IconButton id="select-all" key="select-all" onClick={() => setAllTags(true)}>
+          {includedFilters.size === 0 && excludedFilters.size === 0 ? (
+            <IconButton
+              id="select-all"
+              aria-label={filtersLabel}
+              key="select-all"
+              onClick={() => setAllFilters(true)}
+            >
               <BatchAcceptIcon />
-              Select all
+              {filtersLabel}
             </IconButton>
           ) : (
-            <IconButton id="deselect-all" key="deselect-all" onClick={() => setAllTags(false)}>
+            <IconButton
+              id="deselect-all"
+              aria-label={filtersLabel}
+              key="deselect-all"
+              onClick={() => setAllFilters(false)}
+            >
               <SweepIcon />
-              Clear filters
+              {filtersLabel}
             </IconButton>
           )}
           {hasDefaultSelection && (
@@ -271,7 +246,7 @@ export const TagsFilterPanel = ({
               <IconButton
                 id="reset-filters"
                 key="reset-filters"
-                onClick={resetTags}
+                onClick={resetFilters}
                 aria-label="Reset filters"
                 disabled={isDefaultSelection}
               >
@@ -281,7 +256,7 @@ export const TagsFilterPanel = ({
           )}
         </Actions>
       )}
-      <TooltipLinkList links={groups} />
+      <TooltipLinkList links={links} />
     </Wrapper>
   );
 };
diff --git a/code/e2e-tests/tags.spec.ts b/code/e2e-tests/tags.spec.ts
index 103572ae227e..3f59b9874218 100644
--- a/code/e2e-tests/tags.spec.ts
+++ b/code/e2e-tests/tags.spec.ts
@@ -1,8 +1,9 @@
 import { expect, test } from '@playwright/test';
 
-import { SbPage } from './util';
+import { SbPage, isReactSandbox } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 
 test.describe('tags', () => {
   test.beforeEach(async ({ page }) => {
@@ -49,28 +50,80 @@ test.describe('tags', () => {
 
   test.describe('Tag filters tooltip', () => {
     test('filters stories via Tag filters tooltip (desktop)', async ({ page }) => {
+      const sbPage = new SbPage(page, expect);
+
       // Open Tag filters tooltip
-      await page.locator('[title="Tag filters"]').click();
-      const tooltip = page.locator('[data-testid="tooltip"]');
-      await expect(tooltip).toBeVisible();
+      const tooltip = await sbPage.openTagsFilter();
 
       // No checkbox selected by default and "Select all tags" is shown
       await expect(tooltip.locator('#select-all')).toBeVisible();
       await expect(tooltip.locator('input[type="checkbox"]:checked')).toHaveCount(0);
 
-      // Select the dev-only tag
-      await page.getByText('dev-only', { exact: true }).click();
-
-      // Assert that only one story is visible in the sidebar
+      // When selecting dev-only, there should be only one story in the sidebar
+      await sbPage.toggleTagFilter('dev-only');
       const stories = page.locator('#storybook-explorer-menu .sidebar-item');
       await expect(stories).toHaveCount(1);
+    });
 
-      // Clear selection
-      await expect(tooltip.locator('#deselect-all')).toBeVisible();
-      await tooltip.locator('#deselect-all').click();
+    test('filters stories via Tag filter types', async ({ page }) => {
+      test.skip(
+        !isReactSandbox(templateName),
+        'Test filtering is currently only supported in React renderer'
+      );
+
+      const sbPage = new SbPage(page, expect);
+
+      // Open Tag filters tooltip
+      const tooltip = await sbPage.openTagsFilter();
 
-      // Checkboxes are not selected anymore
+      // No checkbox selected by default and "Select all tags" is shown
+      await expect(tooltip.locator('#select-all')).toBeVisible();
       await expect(tooltip.locator('input[type="checkbox"]:checked')).toHaveCount(0);
+
+      // When selecting type docs, there should be no stories in the sidebar
+      await sbPage.toggleStoryTypeFilter('Documentation');
+      await sbPage.expandAllSidebarNodes();
+      await expect(
+        page.locator('#storybook-explorer-menu .sidebar-item[data-nodetype="story"]')
+      ).toHaveCount(0);
+
+      await sbPage.clearTagsFilter();
+
+      // When excluding type docs, there should be no stories in the sidebar
+      await sbPage.toggleStoryTypeFilter('Documentation', true);
+      await expect(
+        page.locator('#storybook-explorer-menu .sidebar-item[data-nodetype="document"]')
+      ).toHaveCount(0);
+
+      // Clear selection
+      await sbPage.clearTagsFilter();
+
+      // When selecting type play, there should be no docs in the sidebar
+      await sbPage.toggleStoryTypeFilter('Play');
+      await sbPage.expandAllSidebarNodes();
+      await expect(
+        page.locator('#storybook-explorer-menu .sidebar-item[data-nodetype="document"]')
+      ).toHaveCount(0);
+
+      await sbPage.clearTagsFilter();
+
+      // When selecting type test, there should be tests visible in the sidebar
+      await sbPage.toggleStoryTypeFilter('Testing');
+      await sbPage.expandAllSidebarNodes();
+      const testItems = page.locator(
+        '#storybook-explorer-menu .sidebar-item[data-nodetype="test"]'
+      );
+      await expect(testItems.count()).resolves.toBeGreaterThan(0);
+
+      await sbPage.clearTagsFilter();
+
+      // When excluding type test, there should be no tests visible in the sidebar
+      await sbPage.toggleStoryTypeFilter('Testing', true);
+      await expect(
+        page.locator('#storybook-explorer-menu .sidebar-item[data-nodetype="test"]')
+      ).toHaveCount(0);
+
+      await sbPage.clearTagsFilter();
     });
 
     test.describe('mobile viewport', () => {
diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts
index f3456a06eb1f..3f602132d0cf 100644
--- a/code/e2e-tests/util.ts
+++ b/code/e2e-tests/util.ts
@@ -173,6 +173,58 @@ export class SbPage {
     }
   }
 
+  async expandAllSidebarNodes() {
+    await this.page.keyboard.press('Escape');
+    await this.page.keyboard.press(
+      `${process.platform === 'darwin' ? 'Meta' : 'Control'}+Shift+ArrowDown`
+    );
+  }
+
+  async openTagsFilter() {
+    const tagFiltersButton = this.page.locator('[title="Tag filters"]');
+    const tooltip = this.page.locator('[data-testid="tooltip"]');
+    const isTooltipVisible = await tooltip.isVisible();
+
+    if (!isTooltipVisible) {
+      await tagFiltersButton.click();
+      await this.expect(tooltip).toBeVisible();
+    }
+
+    return tooltip;
+  }
+
+  async clearTagsFilter() {
+    const tooltip = await this.openTagsFilter();
+    await this.expect(tooltip.locator('#deselect-all')).toBeVisible();
+    await tooltip.locator('#deselect-all').click();
+    return tooltip;
+  }
+
+  async toggleTagFilter(tag: string, toggleExclusion?: boolean) {
+    await this.openTagsFilter();
+
+    if (toggleExclusion) {
+      await this.page.getByLabel(new RegExp(`tag filter: ${tag}`)).hover();
+      await this.page.getByLabel(new RegExp(`(Exclude|Include) tag: ${tag}`)).click();
+    } else {
+      await this.page.getByLabel(new RegExp(`tag filter: ${tag}`)).click();
+    }
+  }
+
+  async toggleStoryTypeFilter(
+    type: 'Documentation' | 'Play' | 'Testing',
+    toggleExclusion?: boolean
+  ) {
+    await this.openTagsFilter();
+
+    if (toggleExclusion) {
+      await this.page.getByLabel(new RegExp(`filter: ${type}`)).hover();
+      await this.page.getByLabel(new RegExp(`(Exclude|Include) built-in: ${type}`, 'i')).click();
+    } else {
+      await this.page.getByLabel(new RegExp(`(Add|Remove) built-in filter: ${type}`)).click();
+    }
+  }
+
   getCanvasBodyElement() {
     return this.previewIframe().locator('body');
   }