Tag 标签

用于分类、标记和组织内容的标签。

导入

import { Tag } from 'asterui'

示例

基础标签

带有预设颜色的简单标签。

</>

DefaultPrimarySecondaryAccentInfoSuccessWarningError

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag>Default</Tag>
        <Tag color="primary">Primary</Tag>
        <Tag color="secondary">Secondary</Tag>
        <Tag color="accent">Accent</Tag>
        <Tag color="info">Info</Tag>
        <Tag color="success">Success</Tag>
        <Tag color="warning">Warning</Tag>
        <Tag color="error">Error</Tag>
      </Space>
    )
}

export default App

变体

标签的不同样式变体。

</>

FilledOutlinedSoftDash

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="primary" variant="filled">Filled</Tag>
        <Tag color="primary" variant="outlined">Outlined</Tag>
        <Tag color="primary" variant="soft">Soft</Tag>
        <Tag color="primary" variant="dash">Dash</Tag>
      </Space>
    )
}

export default App

可关闭标签

用户可以关闭的标签。

</>

Tag 1Tag 2Tag 3

import { Tag, Space, TagLiveRegion } from 'asterui'
import { useState } from 'react'

function App() {
  const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']);
  
  const handleClose = (tag: string) => {
    setTags(tags.filter((t) => t !== tag));
  };
  
  return (
      <TagLiveRegion />
      <Space size="sm" wrap>
        {tags.map((tag) => (
          <Tag
            key={tag}
            closable
            color="primary"
            onClose={() => handleClose(tag)}
          >
            {tag}
          </Tag>
        ))}
      </Space>
    )
}

export default App

带图标的标签

向标签添加图标以获得更好的视觉传达。

</>

ApprovedPending

import { Tag, Space } from 'asterui'
import { CheckCircleIcon, ExclamationCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="success" icon={<CheckCircleIcon size="sm" />}>
          Approved
        </Tag>
        <Tag color="warning" icon={<ExclamationCircleIcon size="sm" />}>
          Pending
        </Tag>
      </Space>
    )
}

export default App

标签尺寸

标签有五种尺寸可用。

</>

Extra SmallSmallMediumLargeExtra Large

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" align="center" wrap>
        <Tag color="primary" size="xs">Extra Small</Tag>
        <Tag color="primary" size="sm">Small</Tag>
        <Tag color="primary" size="md">Medium</Tag>
        <Tag color="primary" size="lg">Large</Tag>
        <Tag color="primary" size="xl">Extra Large</Tag>
      </Space>
    )
}

export default App

自定义颜色

使用自定义十六进制颜色进行独特样式。

</>

RedBlueGreenCyanCrimson

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="#f50">Red</Tag>
        <Tag color="#2db7f5">Blue</Tag>
        <Tag color="#87d068">Green</Tag>
        <Tag color="#108ee9">Cyan</Tag>
        <Tag color="#f5222d">Crimson</Tag>
      </Space>
    )
}

export default App

链接标签

导航到 URL 的标签。

</>

GitHubDocumentation

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="primary" href="https://github.com" target="_blank">
          GitHub
        </Tag>
        <Tag color="info" href="/docs">
          Documentation
        </Tag>
      </Space>
    )
}

export default App

禁用标签

带有禁用状态的标签。

</>

Disabled TagDisabled ClosableDisabled Checkable

import { Tag, CheckableTag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="primary" disabled>Disabled Tag</Tag>
        <Tag color="primary" closable disabled>Disabled Closable</Tag>
        <CheckableTag disabled>Disabled Checkable</CheckableTag>
      </Space>
    )
}

export default App

可勾选标签

可以打开和关闭切换的标签。

</>

ReactVueAngularSvelte

import { CheckableTag, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [selectedTags, setSelectedTags] = useState<string[]>(['React']);
  
  const handleChange = (tag: string, checked: boolean) => {
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter((t) => t !== tag);
    setSelectedTags(nextSelectedTags);
  };
  
  const tags = ['React', 'Vue', 'Angular', 'Svelte'];
  
  return (
      <Space size="sm" wrap>
        {tags.map((tag) => (
          <CheckableTag
            key={tag}
            checked={selectedTags.includes(tag)}
            onChange={(checked) => handleChange(tag, checked)}
          >
            {tag}
          </CheckableTag>
        ))}
      </Space>
    )
}

export default App

可勾选标签颜色

具有不同颜色和尺寸的可勾选标签。

</>

SuccessWarningError

import { CheckableTag, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [checked, setChecked] = useState([true, false, false]);
  
  return (
      <Space size="sm" wrap>
        <CheckableTag
          checked={checked[0]}
          onChange={(c) => setChecked([c, checked[1], checked[2]])}
          color="success"
          size="sm"
        >
          Success
        </CheckableTag>
        <CheckableTag
          checked={checked[1]}
          onChange={(c) => setChecked([checked[0], c, checked[2]])}
          color="warning"
          size="md"
        >
          Warning
        </CheckableTag>
        <CheckableTag
          checked={checked[2]}
          onChange={(c) => setChecked([checked[0], checked[1], c])}
          color="error"
          size="lg"
        >
          Error
        </CheckableTag>
      </Space>
    )
}

export default App

带图标的可勾选标签

向可勾选标签添加图标。

</>

LikeStarSave

import { CheckableTag, Space } from 'asterui'
import { HeartIcon, StarIcon, BookmarkIcon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [liked, setLiked] = useState(false);
  const [starred, setStarred] = useState(true);
  const [saved, setSaved] = useState(false);
  
  return (
      <Space size="sm" wrap>
        <CheckableTag
          checked={liked}
          onChange={setLiked}
          icon={<HeartIcon size="sm" />}
        >
          Like
        </CheckableTag>
        <CheckableTag
          checked={starred}
          onChange={setStarred}
          icon={<StarIcon size="sm" />}
        >
          Star
        </CheckableTag>
        <CheckableTag
          checked={saved}
          onChange={setSaved}
          icon={<BookmarkIcon size="sm" />}
        >
          Save
        </CheckableTag>
      </Space>
    )
}

export default App

使用案例

标签使用的实际示例。

</>

Categories:ReactTypeScriptUI

Status:ActivePendingExpired

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        {/* Article tags */}
        <Space size="sm" align="center">
          <span className="text-sm text-base-content/70">Categories:</span>
          <Tag color="primary">React</Tag>
          <Tag color="secondary">TypeScript</Tag>
          <Tag color="accent">UI</Tag>
        </Space>
  
        {/* Status indicators */}
        <Space size="sm" align="center">
          <span className="text-sm text-base-content/70">Status:</span>
          <Tag color="success">Active</Tag>
          <Tag color="warning">Pending</Tag>
          <Tag color="error">Expired</Tag>
        </Space>
      </Space>
    )
}

export default App

API

Tag

属性	描述	类型	默认值
closable	显示关闭图标并启用关闭	boolean	false
closeIcon	自定义关闭图标元素	ReactNode	-
onClose	标签关闭时的回调	() => void	-
color	标签颜色(预设或自定义十六进制)	'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | string	-
icon	文本前显示的图标元素	ReactNode	-
size	标签大小	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
variant	标签样式变体	'filled' | 'outlined' | 'soft' | 'dash'	'filled'
visible	受控可见性状态	boolean	-
disabled	禁用交互	boolean	false
href	将标签渲染为链接	string	-
target	链接目标(设置 href 时)	string	-
children	标签内容	ReactNode	-
className	额外的 CSS 类	string	-
data-testid	组件的测试 ID	string	'tag'
aria-label	可访问标签(在关闭按钮公告中使用)	string	-

CheckableTag

属性	描述	类型	默认值
checked	标签是否勾选	boolean	false
onChange	勾选状态更改时的回调	(checked: boolean) => void	-
icon	文本前显示的图标元素	ReactNode	-
size	标签大小	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
color	勾选时的标签颜色	'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'ghost'	'primary'
disabled	禁用交互	boolean	false
children	标签内容	ReactNode	-
className	额外的 CSS 类	string	-
data-testid	组件的测试 ID	string	'checkable-tag'

可访问性

• 关闭按钮包含描述性的 aria-label(例如,“删除标签 1”)
• CheckableTag 使用带有正确 aria-checked 状态的 role="checkbox"
• 可通过键盘访问 - 关闭和切换操作使用 Enter/Space 工作
• 所有交互元素上的可见焦点指示器
• TagLiveRegion 向屏幕阅读器宣布标签移除
• 禁用时设置 aria-disabled 属性
• 预设颜色的颜色对比度符合 WCAG 指南