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

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

应用标签

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

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

.storybook/preview.ts

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Preview } from '@storybook/your-framework';
 
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. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta = {
  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'],
} satisfies Meta<typeof Button>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
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. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta = {
  component: Button,
  // 👇 Applies to all stories in this file
  tags: ['stable'],
} satisfies Meta<typeof Button>;
export default meta;
 
type Story = StoryObj<typeof meta>;
 
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 文件 meta 中）或单个 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. react-vite, nextjs, vue3-vite, etc.
import type { Meta } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta = {
  component: Button,
  /*
   * All stories in this file will:
   * - Be included in the docs page
   * - Not appear in Storybook's sidebar
   */
  tags: ['autodocs', '!dev'],
} satisfies Meta<typeof Button>;
export default meta;

组合 Stories，仍可单独测试

对于具有许多变体的组件（例如 Button），将所有变体放在网格中是一种有用的可视化方式。但你可能希望单独测试这些变体。你可以通过如下所示的标签实现这一点

Button.stories.tsx

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta = {
  component: Button,
} satisfies Meta<typeof Button>;
export default meta;
 
type Story = StoryObj<typeof meta>;
 
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} />
    </>
  ),
};