import { HStack, Tag } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <Tag.Root>
        <Tag.Label>Plain Tag</Tag.Label>
      </Tag.Root>
      <Tag.Root>
        <Tag.Label>Closable Tag</Tag.Label>
        <Tag.EndElement>
          <Tag.CloseTrigger />
        </Tag.EndElement>
      </Tag.Root>
    </HStack>
  )
}

用法

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

<Tag.Root>
  <Tag.Label>Tag here</Tag.Label>
</Tag.Root>

信息

如果您更喜欢封闭式组件组合，请查看下面的代码片段。

示例

图标

使用 `Tag.StartElement` 和 `Tag.EndElement` 组件在标签的开始或结束处添加图标。

标签 1

热门评价

标签 2

import { HStack, Tag } from "@chakra-ui/react"
import { LuCircleUser, LuFileBadge } from "react-icons/lu"

const Demo = () => {
  return (
    <HStack>
      <Tag.Root>
        <Tag.StartElement>
          <LuCircleUser />
        </Tag.StartElement>
        <Tag.Label>Tag 1</Tag.Label>
      </Tag.Root>
      <Tag.Root>
        <Tag.StartElement>
          <LuFileBadge />
        </Tag.StartElement>
        <Tag.Label>Top Rated</Tag.Label>
      </Tag.Root>
      <Tag.Root>
        <Tag.Label>Tag 2</Tag.Label>
        <Tag.EndElement>
          <LuCircleUser />
        </Tag.EndElement>
      </Tag.Root>
    </HStack>
  )
}

变体

使用 `variant` 属性来更改标签的外观。

灰色

import { For, HStack, Stack, Tag } from "@chakra-ui/react"
import { HiCheck } from "react-icons/hi"

const Demo = () => {
  return (
    <Stack gap="8">
      <For each={["subtle", "solid", "outline", "surface"]}>
        {(variant) => (
          <HStack key={variant}>
            <Tag.Root variant={variant}>
              <Tag.Label>Gray</Tag.Label>
            </Tag.Root>
            <Tag.Root variant={variant}>
              <Tag.Label>Gray</Tag.Label>
              <Tag.EndElement>
                <Tag.CloseTrigger />
              </Tag.EndElement>
            </Tag.Root>
            <Tag.Root variant={variant}>
              <Tag.Label>Gray</Tag.Label>
              <Tag.EndElement>
                <HiCheck />
              </Tag.EndElement>
            </Tag.Root>
          </HStack>
        )}
      </For>
    </Stack>
  )
}

尺寸

使用 `size` 属性来更改标签的尺寸。

灰色

import { For, HStack, Stack, Tag } from "@chakra-ui/react"
import { HiCheck } from "react-icons/hi"

const Demo = () => {
  return (
    <Stack gap="8">
      <For each={["sm", "md", "lg"]}>
        {(size) => (
          <HStack key={size}>
            <Tag.Root size={size}>
              <Tag.Label>Gray</Tag.Label>
            </Tag.Root>
            <Tag.Root size={size}>
              <Tag.Label>Gray</Tag.Label>
              <Tag.EndElement>
                <Tag.CloseTrigger />
              </Tag.EndElement>
            </Tag.Root>
            <Tag.Root size={size}>
              <Tag.Label>Gray</Tag.Label>
              <Tag.EndElement>
                <HiCheck />
              </Tag.EndElement>
            </Tag.Root>
          </HStack>
        )}
      </For>
    </Stack>
  )
}

颜色

使用 `colorPalette` 属性来更改标签的颜色。

灰色

内容

红色

内容

绿色

内容

蓝色

内容

青色

内容

粉色

内容

紫色

内容

青色

内容

橙色

内容

黄色

内容

import { Stack, Tag, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
import { HiPlus } from "react-icons/hi"

const Demo = () => {
  return (
    <Stack gap="2" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <Stack
          align="center"
          key={colorPalette}
          direction="row"
          gap="10"
          px="4"
        >
          <Text minW="8ch">{colorPalette}</Text>

          <Tag.Root size="sm" colorPalette={colorPalette}>
            <Tag.Label>Content</Tag.Label>
          </Tag.Root>
          <Tag.Root size="sm" colorPalette={colorPalette}>
            <Tag.StartElement>
              <HiPlus />
            </Tag.StartElement>
            <Tag.Label>Content</Tag.Label>
          </Tag.Root>
          <Tag.Root colorPalette={colorPalette} variant="solid">
            <Tag.Label>Content</Tag.Label>
            <Tag.EndElement>
              <Tag.CloseTrigger />
            </Tag.EndElement>
          </Tag.Root>
        </Stack>
      ))}
    </Stack>
  )
}

可关闭

在 `Tag.EndElement` 中使用 `Tag.CloseTrigger` 使标签可关闭。

标签 1

标签 2

import { HStack, Tag } from "@chakra-ui/react"
import { LuActivity } from "react-icons/lu"

const Demo = () => {
  return (
    <HStack>
      <Tag.Root>
        <Tag.StartElement>
          <LuActivity />
        </Tag.StartElement>
        <Tag.Label>Tag 1</Tag.Label>
        <Tag.EndElement>
          <Tag.CloseTrigger />
        </Tag.EndElement>
      </Tag.Root>
      <Tag.Root>
        <Tag.Label>Tag 2</Tag.Label>
        <Tag.EndElement>
          <Tag.CloseTrigger />
        </Tag.EndElement>
      </Tag.Root>
    </HStack>
  )
}

溢出

使用 `maxWidth` 属性控制标签的最大宽度。当内容超出此宽度时，将使用省略号进行截断。

这在处理长度可能变化的动态或用户生成内容时特别有用。

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam molestias, laboriosam, quod, quia quidem quae voluptatem natus exercitationem autem quibusdam

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

const Demo = () => {
  return (
    <Tag.Root size="sm" colorPalette="blue" maxW="200px">
      <Tag.Label>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
        molestias, laboriosam, quod, quia quidem quae voluptatem natus
        exercitationem autem quibusdam
      </Tag.Label>
      <Tag.EndElement>
        <Tag.CloseTrigger />
      </Tag.EndElement>
    </Tag.Root>
  )
}

头像

标签组件已设计为可与 `Avatar` 组件良好协作。

注意：将头像尺寸设置为 `full` 以确保其正确显示。

Emily sm

Emily md

Emily lg

Emily xl

import { Avatar, For, HStack, Tag } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <For each={["sm", "md", "lg", "xl"]}>
        {(size) => (
          <Tag.Root key={size} size={size} rounded="full">
            <Tag.StartElement>
              <Avatar.Root size="full">
                <Avatar.Image src="https://i.pravatar.cc/300?u=1" />
                <Avatar.Fallback name="John Doe" />
              </Avatar.Root>
            </Tag.StartElement>
            <Tag.Label>Emily {size}</Tag.Label>
          </Tag.Root>
        )}
      </For>
    </HStack>
  )
}

渲染为按钮

使用 `asChild` 属性将标签渲染为按钮。

import { Tag } from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"

const Demo = () => {
  return (
    <Tag.Root asChild variant="solid">
      <button type="submit">
        <Tag.Label>Fish </Tag.Label>
        <LuCheck />
      </button>
    </Tag.Root>
  )
}

封闭组件

以下是如何为封闭式组件组合设置 Tag。

import { Tag as ChakraTag } from "@chakra-ui/react"
import * as React from "react"

export interface TagProps extends ChakraTag.RootProps {
  startElement?: React.ReactNode
  endElement?: React.ReactNode
  onClose?: VoidFunction
  closable?: boolean
}

export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
  function Tag(props, ref) {
    const {
      startElement,
      endElement,
      onClose,
      closable = !!onClose,
      children,
      ...rest
    } = props

    return (
      <ChakraTag.Root ref={ref} {...rest}>
        {startElement && (
          <ChakraTag.StartElement>{startElement}</ChakraTag.StartElement>
        )}
        <ChakraTag.Label>{children}</ChakraTag.Label>
        {endElement && (
          <ChakraTag.EndElement>{endElement}</ChakraTag.EndElement>
        )}
        {closable && (
          <ChakraTag.EndElement>
            <ChakraTag.CloseTrigger onClick={onClose} />
          </ChakraTag.EndElement>
        )}
      </ChakraTag.Root>
    )
  },
)

如果您想自动将封闭组件添加到项目中，请运行此命令：

npx @chakra-ui/cli snippet add tag

属性

根

属性	默认值	类型
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` 组件的调色板
`size`	`'md'`	`'sm' \| 'md' \| 'lg' \| 'xl'` 组件的尺寸
`variant`	`'surface'`	`'subtle' \| 'solid' \| 'outline' \| 'surface'` 组件的变体

Table

文本区域

标签

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

用法