为 React 构建的界面语言。v1.7.5 已发布
UI
开始设计规范组件变更记录
GitHub 仓库9

Tag 标签

标注状态、分类与属性的短标签。

源码
连载中未分级全年龄推荐科幻
import { Inline, Tag } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline align="center">
      <Tag tone="success">连载中</Tag>
      <Tag tone="warning">未分级</Tag>
      <Tag tone="info">全年龄</Tag>
      <Tag tone="accent" variant="solid">
        推荐
      </Tag>
      <Tag variant="outline">科幻</Tag>
    </Inline>
  )
}
tsx

用法

import { Tag } from '@hina-ui/react'
ts

标签渲染为 span，内容放在 children 中。

标签只做标注，没有点击、选中与移除。需要点击触发操作时使用 Button。

科幻
import { Tag } from '@hina-ui/react'

export default function Demo() {
  return <Tag>科幻</Tag>
}
tsx

示例

变体

共三种：soft 带浅色底，solid 带实心底，outline 只有边框。默认为 soft。

同一处列表中的标签应当使用同一种变体，只用色调区分含义。

variant
tone
pill
连载中
<Tag>连载中</Tag>
tsx

色调

共六种色调。neutral 用于分类与属性，其余五种用于表达状态：accent 表示强调，success 表示成功，warning 表示需要注意，danger 表示错误或者失败，info 表示补充说明。

草稿推荐已通过待复核已驳回全年龄
import { Inline, Tag } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline align="center">
      <Tag tone="neutral">草稿</Tag>
      <Tag tone="accent">推荐</Tag>
      <Tag tone="success">已通过</Tag>
      <Tag tone="warning">待复核</Tag>
      <Tag tone="danger">已驳回</Tag>
      <Tag tone="info">全年龄</Tag>
    </Inline>
  )
}
tsx

尺寸

sm 用于列表与表格，与正文并排时高度更协调；md 用于详情页的标题旁。

size
variant
科幻
<Tag>科幻</Tag>
tsx

胶囊

设置 pill 之后两端变为半圆。

默认圆角胶囊胶囊
import { Inline, Tag } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline align="center">
      <Tag>默认圆角</Tag>
      <Tag pill>胶囊</Tag>
      <Tag pill variant="solid" tone="accent">
        胶囊
      </Tag>
    </Inline>
  )
}
tsx

带图标

图标直接放入 children，位于文字之前，尺寸随标签的尺寸变化。

已通过待复核已驳回
import { Check, CircleAlert, Clock } from 'lucide-react'
import { Inline, Tag } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline align="center">
      <Tag tone="success">
        <Check />
        已通过
      </Tag>
      <Tag tone="warning">
        <Clock />
        待复核
      </Tag>
      <Tag tone="danger" variant="outline">
        <CircleAlert />
        已驳回
      </Tag>
    </Inline>
  )
}
tsx

超长内容

标签内的文字不换行。内容可能很长时，为标签设置最大宽度，并让内部的文字截断。

很长很长的标签名称会在容器边界处截断
import { Tag, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Tag className="max-w-40" tone="accent">
      <Text as="span" truncate>
        很长很长的标签名称会在容器边界处截断
      </Text>
    </Tag>
  )
}
tsx

语义标签

as 指定渲染的标签。一组标签在语义上是列表，容器用 ul，每个标签用 li。它只改变标签名，不会让标签变成可点击的控件：需要点击或删除的标签是 Chip，不是 Tag。

  • 科幻
  • 悬疑
  • 校园
import { Inline, Tag } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline as="ul" gap="xs">
      <Tag as="li">科幻</Tag>
      <Tag as="li">悬疑</Tag>
      <Tag as="li">校园</Tag>
    </Inline>
  )
}
tsx

无障碍

  • 标签本身是普通文本，不带角色，屏幕阅读器按正文朗读。
  • 颜色不能作为唯一的区分方式，文字应当说明状态本身，例如“已驳回”而不只是红色。
  • 标签不可聚焦，键盘操作不会停留在它上面。

API

Props

属性
类型
默认值
说明
variant
'soft' | 'solid' | 'outline'
'soft'
视觉样式
tone
'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'
'neutral'
语义色调
size
'sm' | 'md'
'sm'
尺寸
pill
boolean
false
是否呈胶囊形
as
string
'span'
渲染的标签
className
string
—
追加至根元素的类名

内容属性

属性
说明
children
标签的图标与文字