Chuyển tới nội dung
werewolf-ui
Component

Token

Pill that names a design token or another short machine value (color-accent, spacing-md). Soft hue pair, pink by default, so it reads as a value and not a status. One optional leading element: a 12px icon, a 12px swatch that shows a color token in the active mode, or a 16px Avatar for a person or team. With onRemove it ends in a remove button, for picked values the user can take out.

Xem trước

spacing-md

Props

  • color
  • swatch
  • removeLabel
  • label
  • icon
  • avatar
  • removable
import { Token } from "@/components/ui/token"

<Token>spacing-md</Token>

Cách dùng

Khi nào dùng

  • Show a design token name or another short machine value, in tables or inside running text.
  • Show the color of a color token with a swatch next to its name.
  • Show values the user picked and can take out again, such as active filters, with onRemove.

Khi nào không dùng

  • Status or categories. Use Badge.
  • As a button or link on its own. To make a token copyable, wrap it in a button and give the button the label.

Biến thể

color

Soft pair: background-<hue> with text-<hue>. Never the solid. pink is the default so tokens stand apart from status badges.

  • spacing-md

    pinkmặc định

  • spacing-md

    red

  • spacing-md

    orange

  • spacing-md

    yellow

  • spacing-md

    green

  • spacing-md

    teal

  • spacing-md

    blue

  • spacing-md

    purple

  • spacing-md

    gray

import { Token } from "@/components/ui/token"

<Token>spacing-md</Token>
<Token color="red">spacing-md</Token>
<Token color="orange">spacing-md</Token>
<Token color="yellow">spacing-md</Token>
<Token color="green">spacing-md</Token>
<Token color="teal">spacing-md</Token>
<Token color="blue">spacing-md</Token>
<Token color="purple">spacing-md</Token>
<Token color="gray">spacing-md</Token>

Ví dụ

Default

spacing-md
import { Token } from "@/components/ui/token"

<Token>spacing-md</Token>

Color token

The swatch reads the token, so it changes with the mode.

color-accent
import { Token } from "@/components/ui/token"

<Token swatch="var(--color-accent)">color-accent</Token>

With icon

size-element-md
import { IconRuler } from "@tabler/icons-react"
import { Token } from "@/components/ui/token"

<Token>
  <IconRuler size={12} />
  size-element-md
</Token>

Removable

A picked value the user can take out. removeLabel names the button with the value.

font-size-md
import { Token } from "@/components/ui/token"

<Token color="blue" onRemove={removeToken} removeLabel="Remove font-size-md">font-size-md</Token>

With avatar

A recipient the user picked. The token names the person, so the avatar's alt is empty.

ada@example.com
import { Avatar } from "@/components/ui/avatar"
import { Token } from "@/components/ui/token"

<Token color="gray" avatar={<Avatar variant="solid" color="blue" alt="">A</Avatar>} onRemove={removeToken} removeLabel="Remove ada@example.com">ada@example.com</Token>

Nên và không nên

Nên

  • Use it wherever docs or UI show a token name, in tables and inside running text.
  • Add a swatch for color tokens, pointing at the token itself: swatch="var(--color-accent)".
  • Keep the label exactly as it is written in code.
  • Give a removable token a removeLabel with its value: Remove spacing-md.
  • For a value that is a person or a team, lead with a solid Avatar and one initial.

Không nên

  • Don't use it for status or categories; that is Badge.
  • Don't put more than one leading element (icon, swatch or avatar) in the same token.
  • Don't use it as a button or link on its own.
  • Don't make a token removable when the user can't add it back; removing must be something they can undo.

Props

TênKiểuGiá trịMặc địnhMô tả
colorenumpink | red | orange | yellow | green | teal | blue | purple | graypinkSoft pair: background-<hue> with text-<hue>. Never the solid. pink is the default so tokens stand apart from status badges.
swatchstring--CSS color for the leading swatch, usually var(--color-<token>) so it follows light and dark. Leave it out for tokens that are not colors.
avatarnode--A solid Avatar before the label, for a value that is a person or a team, such as a recipient: <Avatar variant="solid" color="blue" alt="">A</Avatar>. One initial; the token sets its size.
onRemovefunction--Called when the remove button is pressed. Setting it shows the button. Use for values the user picked and can take out again, such as filters or the values of a multi-value field.
removeLabelstring--Accessible name of the remove button, with the value in it: Remove spacing-md. Required with onRemove.

Slot

TênBắt buộcMô tả
labelcóThe token name or value, as written in code.
iconkhôngOptional leading icon. Use either an icon or a swatch, not both.

Cấu tạo

PhầnMô tả
rootThe pill: soft hue fill, radius-full, compact type, 20px tall. Text in a paragraph with a Token uses leading-5.
iconOptional Tabler icon before the label, 12px.
swatchOptional 12px circle filled with the token color, with a border-strong edge.
avatarOptional Avatar before the label, drawn at 16px with 12px initials and pulled into the pill's padding, so the token stays 20px tall. Solid, since the soft fill would not stand out on the pill.
removeOptional remove button at the end: a 16px circle around a 12px X in the token's hue. Neutral hover and pressed overlays, focus ring.
hitAreaTransparent ::before centered on the remove button, never smaller than size-target-min (24px on mouse, 44px on touch).

Khả năng truy cập

Role: generic

PhímHành động
TabWith onRemove: moves focus to the remove button and shows the focus ring.
Enter, SpaceWith onRemove: removes the token.
  • Token itself is not interactive. To make a token copyable, wrap it in a button and give the button the label.
  • The remove button is a real button named by removeLabel, which must include the value (Remove spacing-md), since a page often holds several. The type requires removeLabel with onRemove.
  • After a remove, move focus to the next token's remove button or back to the field the tokens belong to, so focus is not lost with the button.
  • The remove button is 16px but its hit area is size-target-min (24px on mouse, 44px on touch).
  • The leading avatar is hidden from screen readers (aria-hidden), since the label names the person.
  • The swatch and icon are decorative (aria-hidden). The text is the token name, so the meaning never depends on color.
  • Text stays selectable, so a reader can copy the token name.

Cài đặt

npx shadcn add https://werewolf-ui.vercel.app/r/token.json

Lệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau @import "tailwindcss", với đường dẫn tính từ file CSS đó (từ app/globals.css là @import "../styles/werewolf.css").