標籤	預設套用？	描述
`autodocs`	否	標記為 `autodocs` 的 stories 將包含在文件頁面中。如果 CSF 檔案未包含至少一個標記為 `autodocs` 的 story，則該元件不會產生文件頁面。
`dev`	是	標記為 `dev` 的 stories 會在 Storybook 的側邊欄中呈現。
`test`	是	標記為 `test` 的 stories 目前不會影響 Storybook 的 UI，但可以用於篩選測試執行器。

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 檔案 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., 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:
   *    - Be included in the docs page
   *    - Not appear in Storybook's sidebar
   */
  tags: ['autodocs', '!dev'],
};
export default meta;

組合 stories，仍然個別測試

對於具有許多變體的元件（例如 Button），將這些變體全部放在一起的網格，可以是一種有助於視覺化的方式。但您可能希望個別測試這些變體。您可以使用如下所示的標籤來完成此操作

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 },
};
 
// Etc...
 
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}>
      {/* Etc... */}
    </>
  ),
};