Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

Tag

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

ソース@yamada-ui/tag

インポート

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

使い方

編集可能な例

<Tag>Tag</Tag>
Copied!

バリアントを変更する

編集可能な例

<Wrap gap="md">
  <Tag variant="subtle" colorScheme="primary">
    Primary
  </Tag>
  <Tag variant="solid" colorScheme="secondary">
    Secondary
  </Tag>
  <Tag variant="outline" colorScheme="success">
    Success
  </Tag>
</Wrap>
Copied!

サイズを変更する

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

編集可能な例

<Wrap gap="md" alignItems="flex-start">
  <Tag colorScheme="primary" size="sm">
    Small
  </Tag>
  <Tag colorScheme="secondary" size="md">
    Medium
  </Tag>
  <Tag colorScheme="warning" size="lg">
    Large
  </Tag>
</Wrap>
Copied!

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

編集可能な例

<VStack>
  <Wrap gap="md">
    <Tag variant="subtle" colorScheme="primary">
      Primary
    </Tag>
    <Tag variant="subtle" colorScheme="secondary">
      Secondary
    </Tag>
    <Tag variant="subtle" colorScheme="success">
      Success
    </Tag>
    <Tag variant="subtle" colorScheme="warning">
      Warning
    </Tag>
    <Tag variant="subtle" colorScheme="danger">
      Danger
    </Tag>
    <Tag variant="subtle" colorScheme="link">
      Link
    </Tag>
    <Tag variant="subtle" colorScheme="gray">
      Gray
    </Tag>
    <Tag variant="subtle" colorScheme="neutral">
      Neutral
    </Tag>
    <Tag variant="subtle" colorScheme="red">
      Red
    </Tag>
    <Tag variant="subtle" colorScheme="rose">
      Rose
    </Tag>
    <Tag variant="subtle" colorScheme="pink">
      Pink
    </Tag>
    <Tag variant="subtle" colorScheme="orange">
      Orange
    </Tag>
    <Tag variant="subtle" colorScheme="amber">
      Amber
    </Tag>
    <Tag variant="subtle" colorScheme="yellow">
      Yellow
    </Tag>
    <Tag variant="subtle" colorScheme="lime">
      Lime
    </Tag>
    <Tag variant="subtle" colorScheme="green">
      Green
    </Tag>
    <Tag variant="subtle" colorScheme="emerald">
      Emerald
    </Tag>
    <Tag variant="subtle" colorScheme="teal">
      Teal
    </Tag>
    <Tag variant="subtle" colorScheme="cyan">
      Cyan
    </Tag>
    <Tag variant="subtle" colorScheme="sky">
      Sky
    </Tag>
    <Tag variant="subtle" colorScheme="blue">
      Blue
    </Tag>
    <Tag variant="subtle" colorScheme="indigo">
      Indigo
    </Tag>
    <Tag variant="subtle" colorScheme="violet">
      Violet
    </Tag>
    <Tag variant="subtle" colorScheme="purple">
      Purple
    </Tag>
    <Tag variant="subtle" colorScheme="fuchsia">
      Fuchsia
    </Tag>
  </Wrap>

  <Wrap gap="md">
    <Tag variant="solid" colorScheme="primary">
      Primary
    </Tag>
    <Tag variant="solid" colorScheme="secondary">
      Secondary
    </Tag>
    <Tag variant="solid" colorScheme="success">
      Success
    </Tag>
    <Tag variant="solid" colorScheme="warning">
      Warning
    </Tag>
    <Tag variant="solid" colorScheme="danger">
      Danger
    </Tag>
    <Tag variant="solid" colorScheme="link">
      Link
    </Tag>
    <Tag variant="solid" colorScheme="gray">
      Gray
    </Tag>
    <Tag variant="solid" colorScheme="neutral">
      Neutral
    </Tag>
    <Tag variant="solid" colorScheme="stone">
      Stone
    </Tag>
    <Tag variant="solid" colorScheme="red">
      Red
    </Tag>
    <Tag variant="solid" colorScheme="rose">
      Rose
    </Tag>
    <Tag variant="solid" colorScheme="pink">
      Pink
    </Tag>
    <Tag variant="solid" colorScheme="orange">
      Orange
    </Tag>
    <Tag variant="solid" colorScheme="amber">
      Amber
    </Tag>
    <Tag variant="solid" colorScheme="yellow">
      Yellow
    </Tag>
    <Tag variant="solid" colorScheme="lime">
      Lime
    </Tag>
    <Tag variant="solid" colorScheme="green">
      Green
    </Tag>
    <Tag variant="solid" colorScheme="emerald">
      Emerald
    </Tag>
    <Tag variant="solid" colorScheme="teal">
      Teal
    </Tag>
    <Tag variant="solid" colorScheme="cyan">
      Cyan
    </Tag>
    <Tag variant="solid" colorScheme="sky">
      Sky
    </Tag>
    <Tag variant="solid" colorScheme="blue">
      Blue
    </Tag>
    <Tag variant="solid" colorScheme="indigo">
      Indigo
    </Tag>
    <Tag variant="solid" colorScheme="violet">
      Violet
    </Tag>
    <Tag variant="solid" colorScheme="purple">
      Purple
    </Tag>
    <Tag variant="solid" colorScheme="fuchsia">
      Fuchsia
    </Tag>
  </Wrap>

  <Wrap gap="md">
    <Tag variant="outline" colorScheme="primary">
      Primary
    </Tag>
    <Tag variant="outline" colorScheme="secondary">
      Secondary
    </Tag>
    <Tag variant="outline" colorScheme="success">
      Success
    </Tag>
    <Tag variant="outline" colorScheme="warning">
      Warning
    </Tag>
    <Tag variant="outline" colorScheme="danger">
      Danger
    </Tag>
    <Tag variant="outline" colorScheme="link">
      Link
    </Tag>
    <Tag variant="outline" colorScheme="gray">
      Gray
    </Tag>
    <Tag variant="outline" colorScheme="neutral">
      Neutral
    </Tag>
    <Tag variant="outline" colorScheme="red">
      Red
    </Tag>
    <Tag variant="outline" colorScheme="rose">
      Rose
    </Tag>
    <Tag variant="outline" colorScheme="pink">
      Pink
    </Tag>
    <Tag variant="outline" colorScheme="orange">
      Orange
    </Tag>
    <Tag variant="outline" colorScheme="amber">
      Amber
    </Tag>
    <Tag variant="outline" colorScheme="yellow">
      Yellow
    </Tag>
    <Tag variant="outline" colorScheme="lime">
      Lime
    </Tag>
    <Tag variant="outline" colorScheme="green">
      Green
    </Tag>
    <Tag variant="outline" colorScheme="emerald">
      Emerald
    </Tag>
    <Tag variant="outline" colorScheme="teal">
      Teal
    </Tag>
    <Tag variant="outline" colorScheme="cyan">
      Cyan
    </Tag>
    <Tag variant="outline" colorScheme="sky">
      Sky
    </Tag>
    <Tag variant="outline" colorScheme="blue">
      Blue
    </Tag>
    <Tag variant="outline" colorScheme="indigo">
      Indigo
    </Tag>
    <Tag variant="outline" colorScheme="violet">
      Violet
    </Tag>
    <Tag variant="outline" colorScheme="purple">
      Purple
    </Tag>
    <Tag variant="outline" colorScheme="fuchsia">
      Fuchsia
    </Tag>
  </Wrap>
</VStack>
Copied!

アイコンを追加する

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

編集可能な例

<Wrap gap="md" alignItems="flex-start">
  <Tag colorScheme="primary" size="sm" leftIcon={<Plus />}>
    Small
  </Tag>
  <Tag colorScheme="secondary" size="md" rightIcon={<Plus />}>
    Medium
  </Tag>
  <Tag colorScheme="warning" size="lg" leftIcon={<Plus />}>
    Large
  </Tag>
</Wrap>
Copied!

閉じるボタンを追加する

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

編集可能な例

<Wrap gap="md" alignItems="flex-start">
  <Tag colorScheme="primary" rounded="full" onClose={() => {}}>
    Cyan
  </Tag>
  <Tag colorScheme="secondary" rounded="full" onClose={() => {}}>
    Secondary
  </Tag>
  <Tag colorScheme="warning" rounded="full" onClose={() => {}}>
    Warning
  </Tag>
  <Tag colorScheme="danger" rounded="full" onClose={() => {}}>
    Danger
  </Tag>
</Wrap>
Copied!

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

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

編集可能な例

<Wrap gap="md" alignItems="flex-start">
  <Tag
    variant="solid"
    colorScheme="primary"
    rounded="full"
    onClose={() => {}}
    isDisabled
  >
    Cyan
  </Tag>
  <Tag
    variant="solid"
    colorScheme="secondary"
    rounded="full"
    onClose={() => {}}
    isDisabled
  >
    Secondary
  </Tag>
  <Tag
    variant="solid"
    colorScheme="warning"
    rounded="full"
    onClose={() => {}}
    isDisabled
  >
    Warning
  </Tag>
  <Tag
    variant="solid"
    colorScheme="danger"
    rounded="full"
    onClose={() => {}}
    isDisabled
  >
    Danger
  </Tag>
</Wrap>
Copied!

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

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