标签	默认应用？	描述
`autodocs`	否	带有 `autodocs` 标签的 Stories 包含在文档页面中。如果 CSF 文件不包含至少一个带有 `autodocs` 标签的 story，则该组件将不会生成文档页面。
`dev`	是	带有 `dev` 标签的 Stories 在 Storybook 的侧边栏中呈现。
`test`	是	带有 `test` 标签的 Stories 包含在测试运行器或测试插件运行中。

dev 和 test 标签会自动隐式地应用于您的 Storybook 项目中的每个 story。

应用标签

标签可以是任何静态字符串（即非动态创建），可以是内置标签，也可以是您自己设计的自定义标签。要将标签应用于 story，请将字符串数组分配给 tags 属性。标签可以在项目、组件 (meta) 或 story 级别应用。

例如，要将 autodocs 标签应用于项目中的所有 stories，您可以使用 .storybook/preview.js|ts

.storybook/preview.ts

// Replace your-renderer with the renderer you are using (e.g., react, vue3)
import type { Preview } from '@storybook/your-renderer';
 
const preview: Preview = {
  // ...rest of preview
  /*
   * All stories in your project will have these tags applied:
   * - autodocs
   * - dev (implicit default)
   * - test (implicit default)
   */
  tags: ['autodocs'],
};
 
export default preview;

在组件 stories 文件中，您可以像这样应用标签

Button.stories.ts

// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  /*
   * All stories in this file will have these tags applied:
   * - autodocs
   * - dev (implicit default, inherited from preview)
   * - test (implicit default, inherited from preview)
   */
  tags: ['autodocs'],
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const ExperimentalFeatureStory: Story = {
  /*
   * This particular story will have these tags applied:
   * - experimental
   * - autodocs (inherited from meta)
   * - dev (inherited from meta)
   * - test (inherited from meta)
   */
  tags: ['experimental'],
};

移除标签

要从 story 中移除标签，请在其前面加上 !。例如

Button.stories.ts

// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  // 👇 Applies to all stories in this file
  tags: ['stable'],
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const ExperimentalFeatureStory: Story = {
  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
  tags: ['!stable', 'experimental'],
};

可以为项目中的所有 stories（在 .storybook/preview.js|ts 中）、组件的所有 stories（在 CSF 文件元数据中）或单个 story（如上）移除标签。

按自定义标签过滤

自定义标签在 Storybook 的侧边栏层级结构之上启用了一个灵活的分类层。在上面的示例中，我们创建了一个 experimental 标签，以指示 story 尚不稳定。

您可以为任何目的创建自定义标签。示例用途可能包括

状态，例如 experimental、new、stable 或 deprecated
用户角色，例如 admin、user 或 developer
组件/代码所有权

自定义标签很有用，因为它们在 Storybook 的侧边栏中显示为过滤器。在过滤器中选择标签会导致侧边栏仅显示带有该标签的 stories。选择多个标签会显示包含任何这些标签的 stories。

Filtering by custom tag

按标签过滤是专注于 stories 子集的强大方法，尤其是在大型 Storybook 项目中。您还可以按标签缩小 stories 范围，然后在该子集中进行搜索。

配方

仅用于文档的 Stories

有时，为了文档目的提供示例 stories 可能会有所帮助，但您希望侧边栏导航更侧重于对开发有用的 stories。通过启用 autodocs 标签并移除 dev 标签，一个 story 将变为仅用于文档：仅出现在文档页面中，而不出现在 Storybook 的侧边栏中。

Button.stories.ts

// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  /*
   * All stories in this file will:
   * - Be included in the docs page
   * - Not appear in Storybook's sidebar
   */
  tags: ['autodocs', '!dev'],
};
export default meta;

组合 Stories，仍然单独测试

对于具有许多变体的组件（如按钮），将所有这些变体放在一起的网格可能是一种有用的可视化方式。但您可能希望单独测试这些变体。您可以使用如下标签来实现此目的

Button.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
export default meta;
 
type Story = StoryObj<typeof Button>;
 
export const Variant1: Story = {
  // 👇 This story will not appear in Storybook's sidebar or docs page
  tags: ['!dev', '!autodocs'],
  args: { variant: 1 },
};
 
export const Variant2: Story = {
  // 👇 This story will not appear in Storybook's sidebar or docs page
  tags: ['!dev', '!autodocs'],
  args: { variant: 2 },
};
 
export const Combo: Story = {
  // 👇 This story should not be tested, but will appear in the sidebar and docs page
  tags: ['!test'],
  render: () => (
    <>
      <Button variant={1} />
      <Button variant={2} />
    </>
  ),
};