Tag

Tagは、アイテムを説明するキーワードを使用して分類または整理するコンポーネントです。

インポート

import { Tag } from "@yamada-ui/react"

Copied!

使い方

編集可能な例

<Tag>Tag</Tag>

Copied!

バリアントを変更する

編集可能な例

<Wrap gap="md">
  <For
    each={[
      { variant: "subtle", colorScheme: "primary" },
      { variant: "solid", colorScheme: "secondary" },
      { variant: "outline", colorScheme: "success" },
    ]}
  >
    {({ variant, colorScheme }, index) => (
      <Tag key={index} variant={variant} colorScheme={colorScheme}>
        {toTitleCase(colorScheme)}
      </Tag>
    )}
  </For>
</Wrap>

Copied!

サイズを変更する

アイコンを含むTagの例です。

編集可能な例

<Wrap gap="md" alignItems="flex-start">
  <For
    each={[
      { name: "Small", colorScheme: "primary", size: "sm" },
      { name: "Medium", colorScheme: "secondary", size: "md" },
      { name: "Large", colorScheme: "success", size: "lg" },
    ]}
  >
    {({ name, colorScheme, size }, index) => (
      <Tag key={index} colorScheme={colorScheme} size={size}>
        {name}
      </Tag>
    )}
  </For>
</Wrap>

Copied!

カラースキーマを変更する

編集可能な例

<VStack>
  <For each={["subtle", "solid", "outline"]}>
    {(variant, index) => (
      <Wrap key={index} gap="md">
        <For
          each={[
            "primary",
            "secondary",
            "success",
            "warning",
            "danger",
            "link",
            "gray",
            "neutral",
            "red",
            "rose",
            "pink",
            "orange",
            "amber",
            "yellow",
            "lime",
            "green",
            "emerald",
            "teal",
            "cyan",
            "sky",
            "blue",
            "indigo",
            "violet",
            "purple",
            "fuchsia",
          ]}
        >
          {(colorScheme, index) => (
            <Tag key={index} variant={variant} colorScheme={colorScheme}>
              {toTitleCase(colorScheme)}
            </Tag>
          )}
        </For>
      </Wrap>
    )}
  </For>
</VStack>

Copied!

アイコンを追加する

アイコンを追加する場合は、iconにReactElementを設定します。

編集可能な例

<Wrap gap="md" alignItems="flex-start">
  <For
    each={[
      {
        name: "Small",
        colorScheme: "primary",
        size: "sm",
        leftIcon: <PlusIcon />,
      },
      {
        name: "Medium",
        colorScheme: "secondary",
        size: "md",
        leftIcon: <PlusIcon />,
      },
      {
        name: "Large",
        colorScheme: "warning",
        size: "lg",
        leftIcon: <PlusIcon />,
      },
    ]}
  >
    {({ name, colorScheme, size, leftIcon }, index) => (
      <Tag
        key={index}
        colorScheme={colorScheme}
        size={size}
        leftIcon={leftIcon}
      >
        {name}
      </Tag>
    )}
  </For>
</Wrap>

Copied!

閉じるボタンを追加する

閉じるボタンを追加する場合は、onCloseを設定します。

編集可能な例

<Wrap gap="md" alignItems="flex-start">
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(colorScheme, index) => (
      <Tag
        key={index}
        colorScheme={colorScheme}
        rounded="full"
        onClose={() => {}}
      >
        {toTitleCase(colorScheme)}
      </Tag>
    )}
  </For>
</Wrap>

Copied!

閉じるボタンを無効にする

閉じるボタンを無効にする場合は、isDisabledをtrueに設定します。

編集可能な例

<Wrap gap="md" alignItems="flex-start">
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(colorScheme, index) => (
      <Tag
        key={index}
        variant="solid"
        colorScheme={colorScheme}
        rounded="full"
        onClose={() => {}}
        isDisabled
      >
        {toTitleCase(colorScheme)}
      </Tag>
    )}
  </For>
</Wrap>

Copied!

GitHubでこのページを編集する

前データディスプレイ次Badge